Anzeige
Tutorialbeschreibung

jQuery - Eine Lightbox mit prettyPhoto

jQuery - Eine Lightbox mit prettyPhoto

Will man Fotos eindrucksvoll präsentieren, bietet sich der Einsatz einer sogenannten Lightbox an. Eine solche Lightbox ist eine Art Popup-Fenster, in dem Grafiken angezeigt werden. Im Unterschied zu einer klassischen Fensterlösung wird bei einer Lightbox allerdings kein neues Fenster geöffnet. Vielmehr wird ein Container erstellt, in dem die Bilder angezeigt werden. Üblicherweise wird dabei – um die Aufmerksamkeit noch mehr auf die Bilder zu lenken – die eigentliche Seite abgedunkelt. Für jQuery gibt es sehr viele Lightbox-Plug-ins. In diesem Tutorial wird gezeigt, wie Sie eine Lightbox auf Basis des prettyPhoto-Plug-ins anlegen können.


Bevor prettyPhoto in Aktion gezeigt wird, noch einige allgemeine Hinweise zu Lightboxen. Denn in der Tat sollte man sich vor deren Einsatz darüber im Klaren sein, dass diese nicht nur Vorteile, sondern durchaus auch Nachteile haben. So benötigen Lightboxen im Vergleich zu normalen Popups vergleichsweise viel JavaScript. Zudem lassen sich die in der Lightbox angezeigten Inhalte nicht ohne Weiteres ausdrucken. Pluspunkte sammeln Lightboxen allerdings dahingehend, dass sie nicht von Popup-Blockern betroffen sind. Und noch etwas spricht für den Einsatz von Lightboxen: Sie machen optisch zweifellos eine ganze Menge her.

Es ist bereits angeklungen, dass es für jQuery einige Lightbox-Plug-ins gibt. Die Wahl fiel in diesem Tutorial auf prettyPhoto. Dessen offizielle Projektwebseite finden Sie unter http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/.

Bilder



prettyPhoto wurde von Stéphane Caron entwickelt und läuft in den folgenden Browsern:

  • Firefox 2.0+
  • Safari 3.1.1+
  • Opera 9+
  • Internet Explorer 6.0+

Das prettyPhoto-Plug-in wird üblicherweise für die Präsentation von Bildern verwendet. Allerdings lassen sich damit auch andere Inhalte anzeigen. Das können beispielsweise Videos, Flash-Applikationen oder auch iFrames sein.

prettyPhoto kann zunächst einmal dazu genutzt werden, einzelne Bilder in einer Lightbox anzuzeigen. Ebenso lassen sich auf Basis dieses Plug-ins aber auch Galerien aufbauen. Insgesamt lässt sich prettyPhoto sehr einfach integrieren und konfigurieren. Die Anpassung des Designs an die eigenen Bedürfnisse ist über Themes möglich, von denen vier bereits mitgeliefert werden. Diejenigen, die hier nichts Passendes finden, können selbstverständlich eigene Themes anlegen.

Um mit prettyPhoto überhaupt arbeiten zu können, muss zunächst das jQuery-Framework eingebunden werden. prettyPhoto liefert übrigens eine entsprechende jQuery-Datei mit. Zu finden ist diese im js-Verzeichnis des heruntergeladenen Archivs.
<script src="js/jquery.js" type="text/javascript" ></script>

Laden Sie sich anschließend prettyPhoto von der Seite http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ herunter. Angeboten werden dort eine komprimierte und eine nicht-komprimierte Variante. Für die Entwicklungsphase empfiehlt sich normalerweise der Einsatz der unkomprimierten Version. Im späteren Praxiseinsatz sollte dann auf die komprimierte Variante zurückgegriffen werden.

Nach dem Entpacken des Archivs sind hauptsächlich die beiden Verzeichnisse css und js bzw. die darin enthaltenen Dateien interessant. Binden Sie diese folgendermaßen in Ihre Seite ein.
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" />

Innerhalb des images-Verzeichnisses finden Sie außerdem einige zusätzliche Bilder, die Sie für eigene Experimente nutzen können.
<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
     $("a[rel^='prettyPhoto']").prettyPhoto();
 });
 /* ]]> */
</script>

Damit sind die Vorarbeiten bereits abgeschlossen und die erste Anwendung kann geschrieben werden. Im einfachsten Fall definiert man lediglich ein Bild, das in einer Lightbox angezeigt werden soll.

Das sieht dann folgendermaßen aus:
[Beispiel anzeigen]

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="Das ist ein Hafen"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Das ist in Hafen" /></a>

Bilder, die in der Lightbox angezeigt werden sollen, müssen in einen Hyperlink gepackt werden. Diesem Hyperlink muss das rel-Attribut zugewiesen werden. Titel und Beschreibung des Bildes werden über die beiden Attribute title und alt definiert.

 
Die Grafik in Originalgröße wird innerhalb des a-Elements dem href-Attribut zugewiesen. Klickt ein Besucher die Thumbnail-Grafik an, wird das Verweisziel – in diesem Fall also die Grafik in Originalgröße – in einer Lightbox angezeigt.

Bilder



Bildergalerien umsetzen

Im vorherigen Beispiel wurde lediglich eine Grafik verwendet. Eine solche Anwendung dürfte jedoch die Ausnahme sein. Viel häufiger werden Sie prettyPhoto im Zusammenhang mit Bildergalerien einsetzen. Auch das lässt sich sehr einfach umsetzen. Dazu muss dem rel-Attribut des a-Elements der Name der Galerie in eckigen Klammern zugewiesen werden. Hier die allgemeine Syntax:
rel="prettyPhoto[Galerie]"

 
Der angegebene Name muss bei allen Bildern, die zu dieser Galerie gehören, angegeben werden. Wie eine entsprechende Anwendung aussehen kann, zeigt das folgende Beispiel:
[Beispiel anzeigen]

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a>
<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a>
<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>
<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>
<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a>

Hier wurden mehrere Bilder definiert. Entscheidend ist, dass diesen jeweils der gleiche Wert bzw. Galeriename beim rel-Attribut zugewiesen wird.

Bilder



 

YouTube-Videos einbinden

Wie bereits angeklungen ist, kann man nicht nur Bilder in der Lightbox anzeigen. Auch andere Inhalte lassen sich auf diese Weise präsentieren. Ein typisches Beispiel dafür sind YouTube-Videos.
[Beispiel anzeigen]

Bilder



Die Definition einer entsprechenden Anwendung ist denkbar einfach. Dazu müssen Sie lediglich dem a-Element das gewünschte Video als Verweisziel zuweisen.
<a href="http://www.youtube.com/watch?v=3CG-92Rz2os" rel="prettyPhoto" title="Dropkick Murphys"><img src="images/thumbnails/flash.gif" alt="Dropkick Murphys" width="60" /></a>
Dieses Beispiel zeigt, wie einfach sich Videos integrieren lassen. Die verfügbaren Optionen sind dabei dieselben, die auch im Zusammenhang mit Bildern und Bildergalerien zur Verfügung stehen und im folgenden Abschnitt vorgestellt werden.


 

Die Ausgabe anpassen

prettyPhoto kennt  zahlreiche Parameter, über die sich die Lightbox konfigurieren lässt. Welche das sind, wird in der prettyPhoto-Dokumentation beschrieben, die Sie unter http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/ finden. Interessant ist dort hauptsächlich der Bereich Costumization.

Bilder



Auf dieser Seite finden Sie sämtliche Parameter und deren verfügbare Werte. Interessant ist beispielsweise der animationSpeed-Parameter. Über den lässt sich die Animationsgeschwindigkeit der Lightbox bestimmen. Welche Optionen Sie dabei verwenden können, ist in der Beispielsyntax zu sehen.
animationSpeed: 'normal', /* fast/slow/normal */

Mögliche Werte sind demnach fast (schnell), slow (langsam) und normal. Um die gewünschten Parameter zu verwenden, setzen Sie innerhalb von prettyPhoto() eine geschweifte Klammer. Die einzelnen Parameter sind dann jeweils durch Kommata voneinander getrennt zu notieren. Aber Achtung: Nach dem letzten Parameter wird kein Komma gesetzt. Hier ein Beispiel, wie eine Anwendung aussehen kann, die durch den Einsatz unterschiedlicher Parameter anders als üblich ausgegeben wird.
<script type="text/javascript">
 /* <![CDATA[ */ 
 
      $(document).ready(function(){
     $("a[rel^='prettyPhoto']").prettyPhoto({
     animationSpeed: 'fast',
     opacity: 0.80, 
    showTitle: false
       });
    });
 /* ]]> */
</script>

Auf diese Weise können Sie sämtliche in der Dokumentation aufgeführten Parameter und deren Werte verwenden.



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von DFL

DFL

  • 01.03.2013 - 07:27

verstehe ... keine sonderzeichen ...
da war noch eine frage...gibt es die möglichkeit auch mp3-files im hintergrund abspielen zu lassen in der photogalerie? ...
und nochmals danke für einen tip ...

Portrait von DFL

DFL

  • 01.03.2013 - 07:26

Hallo Daniel,
dein tutorial ist super und für rasches umsetzen bestens geeignet ...



vielleicht hast du ja da einen tip ...

Portrait von fabulant
  • 04.05.2011 - 11:47

Super Anleitung! Vielen Dank! Hab alles eingepflegt. Nur eine Sache verstehe ich bei der Bildergalerie leider nicht ganz: Der Galeriename soll in die eckige Klammer - ok. Aber was ist das genau für eine Galerie..? Lege ich die extra neu an...? Sorry, wahrscheinlich 'ne Anfängerfrage ;-)

Portrait von anpura
  • 03.10.2010 - 15:10

Sehr hilfreich, vielen Dank.

Portrait von BoernOlgardson
  • 08.08.2010 - 11:49

Sehr gut, kommt mir sehr gelegen. Mal sehen wie ich das umsetze :)

Portrait von fneurieser
  • 24.07.2010 - 18:25

Wirklich sehr nützlich, danke für die Anleitung

Portrait von dorfdesigner
  • 20.07.2010 - 11:37

sehr schön Lightbox version

Portrait von Rodee
  • 19.07.2010 - 16:06

Danke für die Anleitung !

Portrait von mad_basher
  • 17.07.2010 - 17:21

Schon erstaunlich, dass man immer wieder was neues findet, was man so mit Lightbox und jQuery anstellen kann.
Gut zu wissen!!!

Portrait von Friedemann
  • 16.07.2010 - 19:55

danke, sowas habe ich shcon mal gesucht! mach weiter so

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 16.07.2010 - 17:28

Danke - Kann diese Anleitung gut gebrauchen.

Portrait von risto
  • 16.07.2010 - 08:31

lets go murphys :D guter geschmack !

Portrait von matt_pengo
  • 15.07.2010 - 10:33

sehr hilfreich danke!

Portrait von sandy64
  • 14.07.2010 - 13:32

Vielen Dank, gutes Tutorial!

Portrait von eddybaer
  • 14.07.2010 - 09:34

Prima Tut! Vielen Dank! So eine Anwendung suchte ich sowieso gerade. :-)

x
×
×