Anzeige
Tutorialbeschreibung

jQuery - Bildergalerien im Lightbox-Stil

jQuery - Bildergalerien im Lightbox-Stil

Längst haben sich die sogenannten Lightboxen im Zusammenhang mit der Präsentation von Bildern auf Webseiten etabliert. Kein Wunder, schließlich lassen sich damit Bilder auf eindrucksvolle Weise anzeigen, ohne dass dabei permanent neue Browserfenster geöffnet werden müssen. In diesem Tutorial wird gezeigt, wie sich Vorschaubilder über den Lightbox-Effekt vergrößern lassen. Im jQuery-Umfeld gibt es dafür unterschiedliche Plug-ins. Für dieses Tutorial fiel die Wahl auf das jQuery lightBox plugin.


Wie werden Bildergalerien klassischerweise aufgebaut? Man fügt in seine Webseite Vorschaugrafiken ein und versieht diese mit Hyperlinks. Werden die Vorschaugrafiken angeklickt, öffnet sich entweder ein neues Browser- oder ein Pop-up-Fenster, in dem die Grafik in Originalgröße zu sehen ist.

Sonderlich anwenderfreundlich ist das freilich nicht. Denn entweder gehen immer neue Browserfenster auf, die vom Anwender wieder geschlossen werden müssen, oder die Bildergalerie funktioniert überhaupt nicht, da beim Benutzer JavaScript deaktiviert ist. (Pop-up-Fenster werden üblicherweise mittels JavaScript geöffnet. Ist JavaScript im Browser ausgeschaltet, öffnen sich die Pop-ups nicht).

Einen möglichen Ausweg aus diesem Dilemma bieten die sogenannten Lightboxen. Eine solche Lightbox ist eine Art Pop-up, bei dem allerdings kein neues Browserfenster geöffnet werden muss. Vielmehr wird durch das hinter der Lightbox steckende Skript ein Container geladen, in dem die Grafik in Originalgröße angezeigt wird.

Die hier vorgestellte Lightbox-Lösung basiert auf einem jQuery-Plug-in. Und vor jenem Hintergrund kommt zweifellos eine berechtigte Frage auf: Da jQuery auf JavaScript basiert, ist die Lightbox auch bei deaktiviertem JavaScript nutzbar? Ja, ist sie. Bei deaktiviertem JavaScript wird – wenn man ein Vorschaubild anklickt– das Originalbild einfach in einer neuen Browserseite angezeigt.

 
Die betreffenden Grafiken müssen in zwei Größen vorliegen: als Vorschaubild und in Originalabmessung. Klickt ein Anwender das Thumbnail an, wird das Originalbild in einer Lightbox angezeigt.

[Beispiel anzeigen]

Bilder



Um eine solche Anwendung anzulegen, fügen Sie in das body-Element des HTML-Dokuments ein Galerie-Grundgerüst ein.

 
Für ein Bild sähe das folgendermaßen aus:

<div id="galerie">
 <a href="photos/image1.jpg" title="Pflanze 1"><img src="photos/thumb_image1.jpg" alt="Pflanze 1" ></a>
</div>

Dabei ist das Vorschaubild in einen Hyperlink eingebettet. Dieser Link verweist auf das Bild in Originalgröße. Zudem ist darauf zu achten, dass dem a-Element ein title-Attribut mit einem passenden Wert zugewiesen wird. Denn dieser Wert fungiert in der Lightbox als Bildbeschreibung.

Im vorherigen Beispiel wurde lediglich eine Grafik in die Galerie eingefügt. Selbstverständlich können Sie aber auch mehrere Grafiken in einer Galerie präsentieren.

<div id="galerie">
 <a href="photos/image1.jpg" title="Pflanze 1"><img src="photos/thumb_image1.jpg" alt="Pflanze 1" ></a>
 <a href="photos/image2.jpg" title="Pflanze 2"><img src="photos/thumb_image2.jpg" alt="Pflanze 2" ></a>
 <a href="photos/image3.jpg" title="Pflanze 3"><img src="photos/thumb_image3.jpg" alt="Pflanze 3" ></a>
 <a href="photos/image4.jpg" title="Pflanze 4"><img src="photos/thumb_image4.jpg" alt="Pflanze 4" ></a>
 <a href="photos/image5.jpg" title="Pflanze 5"><img src="photos/thumb_image5.jpg" alt="Pflanze 5" ></a>
</div>

Fügen Sie dazu einfach in das div-Element die gewünschten Bilder ein.

Bilder



 
Die offizielle Projektwebseite von jQuery lightBox plugin  finden Sie unter http://leandrovieira.com/projects/jquery/lightbox/. Von dort können auch die benötigten Dateien heruntergeladen werden. Binden Sie anschließend jQuery ein. Danach greifen Sie auf die im Download-Verzeichnis liegende Datei jquery.lightbox-0.5.min.js zurück.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>

Zusätzlich sollten Sie die mitgelieferte CSS-Datei einbinden. Diese stellt verschiedene Formatierungen bereit.

<link rel="stylesheet" type="text/css" href="/jsjquery.lightbox-0.5.css">

Damit sind die Vorarbeiten abgeschlossen und die Lightbox kann angelegt werden. Dazu rufen Sie die entsprechende Funktion innerhalb des HTML-Dokuments auf.

[Beispiel anzeigen]

<script type="text/javascript"> 
 /* <![CDATA[ */
  $(document).ready(function(){
                     $('#galerie a').lightBox({
                          fixedNavigation:true
                      }); 
                 });
  /* ]]> */
 </script>

Darüber wird die Lightbox initialisiert. Der Seleketor #galerie a gibt an, auf welche Elemente der Effekt angewendet werden soll. Durch die verwendete Syntax gilt die Definition für alle a-Elemente, die innerhalb des Elements mit der ID galerie stehen.

 
Wie bei jQuery bzw. den jQuery-Plug-ins üblich, stehen zusätzliche Optionen zur Verfügung, über die sich die Lightbox anpassen lässt. Da wäre zunächst der Beschriftungstext.

Bilder



 
Standardmäßig wird dieser auf Englisch angezeigt. Durch die beiden Parameter txtImage und txtOf lassen sich die Texte personalisieren. Aus dem Text

Image 1 of 2

kann man so beispielsweise

Bild 1 von 2

machen. Die Parameter werden – wie das bei jQuery üblich ist – innerhalb der geschweiften Klammern angegeben.

[Beispiel anzeigen]

<script type="text/javascript"> 
 /* <![CDATA[ */
  $(document).ready(function(){
                     $('#galerie a').lightBox({
                           fixedNavigation:true,
                           txtImage: 'Bild',
             txtOf: 'von '
                           }); 
                 });
  /* ]]> */
 </script>

Zunächst notiert man den Parameternamen. Hinter dem Doppelpunkt folgt der gewünschte Wert. Beachten Sie, dass der Parameterwert in Anführungszeichen gesetzt werden muss. Zudem müssen die Parameter durch ein Komma voneinander getrennt werden.

Bilder



 
Die Lightbox funktioniert nach einem altbekannten Prinzip: Klickt man das Vorschaubild an, wird die restliche Webseite abgedunkelt und das Bild wird in der Originalgröße angezeigt. Technisch wird das gelöst, indem ein zusätzlicher Bereich über die vorhandenen Inhalte gelegt wird. Dieses Element, was sich darüber legt, läuft unter dem Namen Overlay. Und eben jenes Overlay lässt sich personalisieren. Dafür stehen verschiedene Parameter zur Verfügung:

Da wäre zunächst overlayOpacity. Über diese Option lässt sich festlegen, wie durchscheinend der über die Seite gelegte Container sein soll. Der Standardwert ist 0.8. Erlaubt sind Werte zwischen 0 und 1, wobei 0 durchsichtig ist, während 1 für undurchsichtig steht. Beachten Sie, dass hier anstelle des sonst üblichen Kommas jeweils ein Punkt gesetzt werden muss.

Über overlayBgColor kann man die Hintergrundfarbe des Containers bestimmen. Standardmäßig ist diese auf #000 als Schwarz gesetzt. Um die Geschwindigkeit festzulegen, mit der sich die Lightbox vergrößert, verwendet man containerResizeSpeed.

Die angegebene Ganzzahl entspricht dabei den Millisekunden, die der Vergrößerungseffekt dauern soll. Der Standardwert ist hier 400.

Und zu guter Letzt gibt es noch fixedNavigation. Durch true wird bestimmt, dass die Navigation, durch die in der Galerie vor- und zurückgeblättert werden kann, immer zu sehen ist.

[Beispiel anzeigen]
<script type="text/javascript">  
 /* <![CDATA[ */
  $(document).ready(function(){
                     $('#galerie a').lightBox({
                          txtImage: 'Bild',
               txtOf: 'von ',
               overlayOpacity: 0.7,
               fixedNavigation: true,
               overlayBgColor: '#fff000'
                      }); 
                 });
  /* ]]> */
 </script> 

 
Einfluss genommen werden kann auch auf die Grafiken, die standardmäßig für die Navigation verwendet werden.

Bilder



Das "Problem" an diesen Standard-Schaltflächen ist nämlich deren englische Beschriftung. Wer diese übersetzen will, muss eigene Grafiken anlegen. Im einfachsten Fall legen Sie die neuen Grafiken unter den gleichen Namen im images-Verzeichnis des Plug-ins ab, unter dem die Originalbilder dort liegen.

 
Alternativ dazu können Sie aber auch auf Parameter zurückgreifen. Welche das sind, zeigt das folgende Beispiel:

$('#galerie a').lightBox({
 //Schließen des Fensters (Standard ist lightbox-btn-close.gif)
   imageBtnClose: 'images/zu.gif',
 //Zum vorherigen Bild (Standard ist lightbox-btn-prev.gif)
   imageBtnPrev: 'images/zurueck.gif',
 //Zum nächsten Bild (Standard ist lightbox-btn-next.gif)
   imageBtnNext: 'images/weiter.gif',
 //Das Bild, das beim Laden angezeigt wird (Standard ist lightbox-ico-loading.gif)
   imageLoading: 'images/laedt.gif'
 });

Die Lightbox lässt sich über Tastendruck steuern. Auch hierfür stehen verschiedene Optionen zur Verfügung:
  • keyToClose – Schließen der Lightbox. (Standardmäßig über die Taste [C])
  • keyToPrev – Zum vorherigen Bild. (Standardmäßig über die Taste [P])
  • keyToNext – Zum nächsten Bild. (Standardmäßig über die Taste [N])

Einen vollständigen Überblick über alle vorhandenen Optionen können Sie sich übrigens auch noch einmal auf der offiziellen Webseite unter http://leandrovieira.com/projects/jquery/lightbox/ im Bereich Extend verschaffen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von schraubergott
Portrait von eddie_be
  • 08.02.2013 - 21:38

hej prima Tut, danke!
Ich glaub das gibt ein langes Wochenende :-)

Portrait von hannanass
  • 16.10.2012 - 10:38

Hat bei mir nicht geklapt :( schade

Portrait von _Hackstog_
  • 28.09.2012 - 16:48

Schön erklärt und gut verständlich, hat mir sehr geholfen, Danke!

Portrait von MineTechCraft
  • 19.06.2012 - 17:15

Musste zwar etwas tüfteln aber gutes TUT. Danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.02.2012 - 20:10

Vielen Dank für das Tutorial! Weil meine alte Lightbox dank neuem IE nicht mehr funktioniert, hat mir dein Tutorial sehr geholfen.

Portrait von YannickDrost
  • 07.11.2011 - 21:22

Auch für mich als Anfänger nachvollziehbar und bilderreich erklärt. Ich werde es so schnell wie möglich ausprobieren =)

Portrait von Grainne
  • 10.10.2011 - 14:23

Immer schon wollte ich wissen, wie so eine Bildergalerie mit JS funktioniert. Als Anfängerin freue ich mich sehr darüber, dass das 1. Tutorial, das ich mir zum Übern ausgesucht habe so wunderbar geklappt hat :-) Ganz toll und ausführlich beschrieben!!! Danke :-)

Portrait von Sorex
  • 07.06.2011 - 14:49

vielen dank für das tut, hat mir sehr geholfen

Portrait von burn3r
  • 29.04.2011 - 16:24

Ist es möglich, das ganze so umzuschreiben, dass jedes Bild was in /bilder liegt so dargestellt wird, ohne jedes expliziet im Code angeben zu müssen?!

Portrait von CocaFlave
  • 16.02.2011 - 17:34

Sehr gutes Tutorial ;)
Habe noch nie was in Js/jQuery gemacht versteht aber trotzdem alles :)
Vielen Dank!

Portrait von robindean93
  • 07.02.2011 - 19:20

Mhh ich hab da son problem bin nicht so das genie in sachen html in der zeile wo es heißt :,,Die offizielle Projektwebseite von jQuery lightBox plugin finden Sie unter http://leandrovieira.com/projects/jquery/lightbox/. Von dort können auch die benötigten Dateien heruntergeladen werden. Binden Sie anschließend jQuery ein. Danach greifen Sie auf die im Download-Verzeichnis liegende Datei jquery.lightbox-0.5.min.js zurück.''
dat versteh ich net sry dass ich mich so doof anstelle xD aber wie binde ich das ein ? übern server und wen dann wie ? xD
würd mich auf ne antwort freuen =)
MfG Rob

Portrait von Elpresidente99
  • 15.12.2010 - 18:24

Komm noch nicht ganz klar aber super genau so will ichs haben. :)

Portrait von incubo
  • 26.10.2010 - 11:53

Einfach, überschaubar, gut!

Portrait von unimacmac
  • 11.10.2010 - 08:07

Gut erklärt - vielen Dank!

Portrait von HerrNilsson
  • 08.10.2010 - 21:55

sehr klar und einfach beschrieben. für anfänger ideal!

Portrait von 2november
  • 08.10.2010 - 17:16

Schön erklärt. Werde ich am Wochenende mal umsetzten.

Danke

Portrait von Krammi
  • 05.10.2010 - 14:15

Super - brauche ich!
Krammi

Portrait von photospace
  • 04.10.2010 - 13:21

Hi finde ich witzig :-)

Danke schön für das nette PDF-Tutorial.

Portrait von anpura
  • 04.10.2010 - 07:53

Vielen Dank für die ausfühliche und verständliche Erklärung.

x
×
×