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 |
 |
|
|
Hallo.
Super Infos, die haben mir echt geholfen!
Ein Frage bleibt mir noch: Wie bekomme ich einen eigenen Post oder Page in die Shadowbox?
Alle Versuche haben dazu geführt, daß der entsprechende Wordpress-Post oder -Page direkt geöffnet wurde, aber leider nicht in der Shadowbox. ;(
Danke für Hilfe…
@Joerg:
Es freut mich, dass ich Dir mit meinem Artikel weiter helfen konnte.
Nun zu Deiner Frage.
Um eine eigene Seite oder Artikel aus Deinem Blog in der Shadowbox anzeigen zu lassen, ist entscheidend, welche URL-Struktur für Permalinks in Deiner Seite verwendet wird.
URL-Struktur: Standard –
[http://webseite.de/?p=123]URL-Struktur: Individuelle Struktur –
[http://webseite.de/%postname%/]H i e r e i n i g e B e i s p i e l e :
Kontaktseite – Kontakt, Photoseite – Photos, ein Artikel – Miss Digital World 2006.
Du kannst auch mehrere Webseiten als Set laden – versuche mal diesen Link.
Probiere es mal bei Dir aus, ob es funzt. Viele Grüße photo pingalerie
Hallo.
Der entscheidene Hinweis war die Angabe der “index.php”! Hatte den Standard-Link genommen der ja ohne diese Angabe funktioniert.
Und um mein finales Ziel zu erreichen, habe ich die Index.php in eine neue Datei kopiert und dort alles rausgeschmissen was zur Seite (Layout) gehört und dieses Seite als Template gespeichert.
Jetzt kann ich einzelne Pages erstellen, mein neues Template zuweisen und diese Seiten dann in der Shadowbox aufrufen… ohne, das wieder die ganze layoutete Seite kommt… sehr schön!
Danke!
@Joerg:
Na, das hört sich ja gut an. Schön, dass es bei Dir jetzt funktioniert.
Viele Grüße photo pingalerie
Leider funktioniert das mit den Hintergrund beim iE8 nicht korrekt.
Wenn besitzer vom iE8, dann klickt doch mal auf das weiter
unten angegebene Bild oder Video und bewegt den
Scrollbalken auf der rechten Seite.(iE8)
Ansonsten empfehlenswert das Script.
Hi,
gute Seite und danke nochmal für den Hinweis, da ich Shadowbox so gar nicht kannte und eher zu Lytebox oder Lightbox genutzt hatte.
Aber eine Frage hätte ich jetzt, da ich Shadowbox nicht zum laufen bekomme.
auch diverse Adapter schon mit heruntergeladen und trotzdem aktiviert sich Shadowbox nicht ?
Eine Idee woran das liegen könnte.
Ist eine normale HP, kein WP.
Gruß,
Tommy