Bisher habe ich bei der Anzeige von Bilder auf das Lightbox2 Javascript by Lokesh Dhakar gesetzt. Lief auch großartig, bis ich für eine übersichtlichere Darstellung der letzten Artikel, Kommentare und populärsten Artikel im Tab-Style, zusätzlich das TabberJavascript von Patrick Fitzgerald in die Sidebar eingebunden habe.
Suchend nach einer anderen Lightbox-Variante, habe ich die Shadowbox by Michael J. I. Jackson für mich entdeckt. Shadowbox ist eine Javascript-Bibliothek zur Betrachtung von Online-Medien aller Art. Die häufigste Verwendung der Shadowbox, ist die eindrucksvolle Anzeige [Lightbox-Effekt] von Bildern, aber es werden noch viele weitere Medientypen unterstützt:
- Bilder (png, jpg, jpeg, gif, bmp)
- Video (avi, mpg, mpeg)
- Quicktime (dv, mov, moov, movie, mp4)
- Windows Media Player (asf, wm, wmv)
- Flash (swf, flv)
- IFrame (asp, aspx, cgi, cfm, htm, html, pdf, pl, php*, phtml, rb, rhtml, shtml, txt, vbs)
Meine Favoriten sind das Anzeigen von Bilder-Galerien, ausgehend von einem Einzelbild und die Möglichkeit externe Webseiten in der Shadowbox darstellen zu lassen, ohne dass der Besucher meine Seite verlassen muss.
Shadowbox arbeitet über Adapter mit diversen JavaScript Frameworks (YUI, Ext, Prototype, jQuery und MooTools) zusammen. Man hat die Wahl, welches Framework verwenden werden soll und kann später diese Wahl auch noch revidieren.
Selbstredend gibt es auch das passende WordPress-Plugin, welches ich übrigens auf diesen Seite einsetze, das uns alle Konfigurationseinstellungen abnimmt. Die möglichen Parameter sind sehr umfangreich und lassen eine gezielte Konfiguration des Plugin zu.
Eine Auswahl an Konfigurationsmöglichkeiten, die angepasst werden können:
- Adapterwahl
- Sprachauswahl
- Animationen sperren
- Animationreihenfolge – erst Breite dann Höhe oder erst Höhe dann Breite oder beides zugleich
- Farbeinstellungen
- Video automatisch abspielen ja/nein
- In einer Galerie Vorwärts- und Rückwärtsbutton ja/nein
- Anzeige der Anzahl von Bildern in einer Galerie ja/nein sowie Counter Typ und Counter Limit und noch mehr…
Zudem gibt es Skins und verschiedene Sprachpakete. Deutsch ist natürlich auch dabei.
|
Hier stelle ich euch ein paar Beispiele zur Verwendung von Shadowbox vor, die ich auch künftig in meinem Blog einsetzen werde. |
Beispiel Code Bildlink:
<a rel="shadowbox;title=Titel für Shadowbox" href="images/bild_gross.jpg" title="Titel für kleines Bild"><img src="images/bild_klein.jpg"></a>
Klicke diesen Link
Beispiel Code Textlink:
<a rel="shadowbox;title=Shadowbox - Einzelbild" href="images/bild_gross.jpg" title="Zeige Bild in der Shadowbox"> Text-Link</a>
Beispiel Code Buttonlink:
<form action="">
<input type="submit" value="Beschriftung Button" onclick="Shadowbox.open({player:'img', title:'Titel des Bildes', content:'images/bild_gross.jpg'}); return false" />
</form>
|
Beispiel Code mit Slideshow:
<a rel="shadowbox[gruppe];options={slideshowDelay:5};title=Bild 1" href="images/bild_gross_01.jpg" title="Ein Klick öffnet die Gallery"><img src="images/bild_01_klein.jpg" alt="GalleryBild"></a>
<a rel="shadowbox[gruppe];options={slideshowDelay:5};title=Bild 2" href="images/bild_gross_02.jpg" title="Ein Klick öffnet die Gallery"><img src="images/bild_02_klein.jpg" alt="GalleryBild"></a>
<a rel="shadowbox[gruppe];options={slideshowDelay:5};title=Bild 3" href="images/bild_gross_03.jpg" title="Ein Klick öffnet die Gallery"><img src="images/bild_03_klein.jpg" alt="GalleryBild"></a>
<a rel="shadowbox[gruppe];title=Bild 4" href="images/bild_gross_04.jpg" title="Ein Klick öffnet die Gallery"><img src="images/bild_04_klein.jpg" alt="GalleryBild"></a>
Beispiel Code ohne Slideshow:
<a rel="shadowbox[gruppe];title=Bild 1" href="images/bild_gross_01.jpg" title="Ein Klick öffnet die Gallery"><img src="images/bild_01_klein.jpg" alt="GalleryBild"></a> <a rel="shadowbox[gruppe];title=Bild 2" href="images/bild_gross_02.jpg" title="Ein Klick öffnet die Gallery"><img src="images/bild_02_klein.jpg" alt="GalleryBild"></a> <a rel="shadowbox[gruppe];title=Bild 3" href="images/bild_gross_03.jpg" title="Ein Klick öffnet die Gallery"><img src="images/bild_03_klein.jpg" alt="GalleryBild"></a> <a rel="shadowbox[gruppe];title=Bild 4" href="images/bild_gross_04.jpg" title="Ein Klick öffnet die Gallery"><img src="images/bild_04_klein.jpg" alt="GalleryBild"></a>
Beispiel Code mit Slideshow:
<a rel="shadowbox[gruppe];options={slideshowDelay:5};title=Gallerybild 1" href="images/bild_gross_01.jpg" title="Ein Klick öffnet die Gallery"><img src="images/bild_01_klein.jpg" alt="GalleryBild"></a>
<div style="display: none;">
<a rel="shadowbox[gruppe];options={slideshowDelay:5};title=Gallerybild 2" href="images/bild_gross_02.jpg"></a>
<a rel="shadowbox[gruppe];options={slideshowDelay:5};title=Gallerybild 3" href="images/bild_gross_03.jpg"></a>
<a rel="shadowbox[gruppe];title=Gallerybild 4" href="images/bild_gross_04.jpg"></a>
</div>
|
Beispiel Code MP3-Textlink:
<a rel="shadowbox;width=320;height=70;player=flv" title="Titel" href="http://meinewebseite/song.mp3&showeq=true&">Song hören</a>
Beispiel Code FLV-Video:
<a rel="shadowbox;width=508;height=283" title="Titel in Shadowbox" href="http://meinewebseite/video.flv"> <img src="http://meinewebseite/bild.jpg" alt="video" title="Zeige Video"/></a>
|
Beispiel Code versteckter Inhalt:
<a rel="shadowbox;width=500;height=200" title="" href="index.html#inline-beispiel">Zeige versteckten Inhalt</a>
<div id="inline-beispiel" style="display: none;">
<ul>
<li>Was ist Shadowbox?</li>
<li>Die Shadowbox ist eine cross-browser, plattformübergreifende, sauber kodierte und vollständig dokumentierte Multimedia Applikation, komplett in JavaScript umgesetzt.</li>
<li>Durch die Verwendung der Shadowbox können Webmaster eine breite Palette von Medien in allen gängingen Browsern anzeigen lassen, ohne den Besucher von der verlinkenden Seite fortschicken zu müssen.</li>
</ul>
</div>
Beispiel Code HTML intern:
<a rel="shadowbox" title="Meine Seite" href="index.html">Interne Seite</a>
Beispiel Code Buttonlink:
<a rel="shadowbox" title="Amazon.de" href="http://www.amazon.de/">Externe Seite</a> |
|
Weitere Beispiele findet ihr auf der Seite des Autors von Shadowbox |
 |
|
|
I am searching for some useful information and process is doing that I cannot require the correct information for the searching time. Then after I am working for the reference information is visible in this website. I am very much thanks to this website and nice approach is visible in this blog. This information is useful for me. Thanks you very much for providing the nice info in this blog.
Write more, that’s all I have to say. Literally, it seems as though you relied on the video to make your point. You clearly know what you’re talking about, why throw away your intelligence on just posting videos to your blog when you could be giving us something enlightening to read?
I really loved reading your blog. It was very well authored and easy to understand. Unlike additional blogs I have read which are really not good. I also found your posts very interesting. In fact after reading, I had to go show it to my friend and he enjoyed it as well!
This site is good because they give us a new thing and new ideas and new topic how good all of they are we should appreciate them because of these good thing.