Bildergalerie mit Lightbox

Da zu meinem Eintrag "Bildergalerie mit interaktiven Thumbnails" von gestern noch die Frage kam, wie man in die mit dem CMS webEdition erstellte Bildergalerie Lightbox integrieren kann ... hier die Anleitung:

Zunächst muss man natürlich Lightbox herunterladen und folgende Dateien in webEdition anlegen - mit den Inhalten aus dem Lightbox-Download:

• /css/lightbox.css
• /js/effects.js
• /js/lightbox.js
• /js/prototype.js
• /js/scriptaculous.js
  

Im nächsten Schritt müssen einige Pfadangaben zu den von Lightbox verwendeten Bildern in der CSS-Datei und in der JavaScript-Datei angepasst werden:

Pfadangaben in /css/lightbox.css anpassen:

Original	Angepasst
../images/blank.gif	/images/blank.gif
../images/prevlabel.gif	/images/prevlabel.gif
../images/nextlabel.gif	/images/nextlabel.gif

Pfadangaben in /js/lightbox.js anpassen:

Original	Angepasst
images/loading.gif	/images/loading.gif
images/closelabel.gif	/images/closelabel.gif

Nun werden noch die CSS- und JavaScript-Dateien in die Vorlage mit der Bilderübersicht eingebunden:

<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="/js/lightbox.js" type="text/javascript"></script>

Für die Bilderübersicht gehe ich von der Listview aus meinem gestrigen Eintrag aus und baue diese nur für die Verwendung mit Lightbox um:

<we:listview type="document" name="ThumbnailList" searchable="false" contenttypes="image/*" workspaceID="367">
 <ul id="thumbs">
   <we:repeat>
     <li>
       <a href="<we:field type="img" thumbnail="Fullscreen" only="src"/>" rel="lightbox[Overview]">
         <we:field type="img" thumbnail="ThumbnailList"/>
       </a>
     </li>
   </we:repeat>
 </ul>
</we:listview>

Wie man sieht, kann man nun den Link nicht mehr automatisch durch das Attribut "hyperlink" beim we:field-Tag generieren lassen, sondern muss ihn selber zusammenstellen um das Attribut "rel" mit dem Wert "lightbox" setzen zu können. Für das große Bild habe ich noch eine zweite Miniaturansicht in webEdition angelegt: "Fullscreen".

Ein Teil der CSS-Definition aus dem gestrigen Beispiel muss auch noch etwas angepasst werden, da sonst die vergrößerte Miniaturansicht über der Lightbox-Ansicht liegen würde:

Original:

ul#thumbs a:hover{
 overflow:visible;
 z-index:1000;
 border:none;    
}

Angepasst:

ul#thumbs a:hover{
 overflow:visible;
 z-index:2; /* für Lightbox geändert */
 border:none;    
}

Und schon haben wir eine Bildergalerie mit einer Lightbox-Ansicht.

Dieses Beispiel können Sie sich hier als webEdition-Teilexport herunterladen:

• Bildergalerie mit Lightbox
  (webEdition-Teilexport / vor dem Import entpacken)
  

Die in diesem Beispiel verwendeten Bilder stammen von Photocase.

Dirk Einecke
(living-e AG / Professional Services - webEdition)