Photo Pingalerie

Mit Shadowbox.js lassen sich nahezu alle Dateien inline anzeigen

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.

Einzelbild
Beispiel 1 von 3   B I L D L I N K – E I N Z E L B I L D

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>

 

Beispiel 2 von 3   T E X T L I N K – E I N Z E L B I L D
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 3 von 3   B U T T O N – E I N Z E L B I L D

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>
 

 

Bildergallery
Beispiel 1 von 2   V E R K L E I N E R T E   V O R S C H A U B I L D E R
GalleryBild GalleryBild GalleryBild GalleryBild
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 2 von 2   G A L L E R Y   -   A U S G E H E N D   V O M   E I N Z E L B I L D
GalleryBild



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>
 

 

MP3  und  FLV  Dateien
Beispiel 1 von 2   M P 3   A L S   T E X T-  B U T T O N-  U N D   B I L D L I N K

 

Beispiel Code MP3-Textlink:
<a rel="shadowbox;width=320;height=70;player=flv" title="Titel" href="http://meinewebseite/song.mp3&amp;showeq=true&amp">Song hören</a>

 

Beispiel 2 von 2   F L V   I N   D E R   S H A D O W B O X

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>

 

 

 

Inline  Content  und  HTML
Beispiel 1 von 3   V E R S T E C K T E R   I N H A L T   I M   D I V
Zeige versteckten Inhalt

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 2 von 3   W E B S E I T E   -   I N T E R N

Beispiel Code HTML intern:
<a rel="shadowbox" title="Meine Seite" href="index.html">Interne Seite</a>

 

Beispiel 3 von 3   W E B S E I T E   -   E X T E R N

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

 

 

· Gelesen: 11303 &
Publiziert am:
Mittwoch, den 15. April 2009 um 21:33 Uhr
Schlagwörter:
| |
Trackback:
Trackback URL
Abgelegt in Kategorie:
Tipps und Tricks - Photos
Artikel drucken:
Artikel im Druckformat Artikel im Druckformat
Bookmarks:
Artikel deinen Bookmarks hinzufügen

Greybox Plugin fuer WordPress
Es gibt für mich im Web immer wieder Neues zu entdecken, so zum Beispiel das JavaScript/CSS Skript Greybox, ein eindrucksvolles PopUp-Fenster der ...
WordPress Plugin Shadowbox JS auf Version 3.0.0.0 aktualisiert
In diesem Beitrag habe ich euch das WordPress Plugin Shadowbox JS vorgestellt, jetzt wurde es auf Version 3.0.0.0 aktualisiert. Was hat sich geändert? ...
Photos oder Bilder mit Lightbox anschaulicher darstellen – Anleitung
Sowohl mit dem Greybox - Plugin, als auch mit dem Java Script Lightbox, kann man auf  eine schöne Art, Bilder und Photos anschaulicher darstellen ...


Zu diesem Artikel wurden 25 Kommentare abgegeben

  1. 19
    Reply to this comment

    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.

  2. 20
    Reply to this comment

    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?

  3. 21
    Reply to this comment

    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!

  4. 22
    Reply to this comment

    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.

Seite 3 von 3«123

Live-Vorschau Deines Kommentar