back


Einbetten einer JavaScript Bildergalerie

Template Portfolio Bildergalerie

 

› download templateGalerie.zip

 

Ordnerstruktur der Vorlage:

 

HTML-Files:

index.html -> Liste Aktuelles

projekte.html -> Projektliste

info.html -> Lebenslauf, Ausstellungen etc.

kontakt.html -> Kontaktadresse

projekt1 -> Beispiel Detailansicht Projekt, Einsatz JavaScript “Slimbox 2″ (jQuery basierter Lightbox Klon) für Bildergalerie

 

CSS-Files und Grafiken Lightbox:

css/reset.css -> globaler reset, wichtig für Browserkompatibilität

css/style.css -> globale CSS Stile für Inhalte von Template

css/slimbox2.css -> CSS Stile für Slimbox Bildergalerie

css/closelabel.gif -> Label für “close” Button Lightbox

css/loading.gif -> Ladegrafik Lightbox

css/nextlabel.gif -> Label für “next” Button Lightbox

css/prevlabel.gif -> Label für “prev” Button Lightbox

 

JS-Files:

js/jquery.min.js -> jQuery Library

js/slimbox2.js -> Skript für Bildergalerie

 

 

Image-Files:

images/aktuell -> Bilder für Liste Aktuelles

images/projekte/preview -> Vorschaubilder Projektliste

images/projekte/thumbnail -> Thumbnailbilder bei Detailansicht Projekt für Einsatz mit Lightbox

images/projekte/big -> Bilder groß für Einsatz mit Lightbox

 

Einsatz Lightbox für Bildergallerie:

 

Für unsere Bildergallerie verwenden wir die JavaScript Library “Slimbox” in der aktuellen Version 2:

 

http://www.digitalia.be/software/slimbox2

 

Die Slimbox ist ein jQuery basierter Lightbox Klon, welche im Netz sehr verbreitet ist. Unter dem Stichwort “Lightbox + jQuery” können aber auch alternative Skripte im Netz gefunden werden, die eine ähnliche Funktionalität bieten.

 

Um die “Slimbox” zu verwenden müssen im Header des HTML Dokument folgende Files eingebunden werden (am Beispiel “projekt1.html”):

 

<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<!-- js lightbox -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/slimbox2.js" type="text/javascript"></script>

 

Das Aufrufen einer “Lightbox” Darstellung wird über das “rel” Attribut im Link zum entsprechenen Bild realisiert:

 

<!-- thumbnails -->
<div id="thumbnails">
    <!-- media -->
    <a href="images/projekte/big/projekt01.jpg" rel="lightbox[projekt1]" title="Bildbeschreibung Bild 1">
        <img src="images/projekte/thumbnail/projekt01.jpg" width="178" height="100" alt="bild 1"/>
    </a>
    <a href="images/projekte/big/projekt02.jpg" rel="lightbox[projekt1]" title="Bildbeschreibung Bild 2">
        <img src="images/projekte/thumbnail/projekt02.jpg" width="178" height="100" alt="bild 2"/>
    </a>
    <a href="images/projekte/big/projekt03.jpg" rel="lightbox[projekt1]" title="Bildbeschreibung Bild 3">
        <img src="images/projekte/thumbnail/projekt03.jpg" width="178" height="100" alt="bild 3"/>
    </a>
</div>

 

Bei einzelnen Bildern reicht es aus dem “rel” Attribut den Wert “lightbox” zu übergeben. Soll jedoch eine Bildergallerie gezeigt werden mit der Möglichkeit in der “Lightbox” Darstellung direkt über einen Vor- und Zurück Button zu einem neuen Bild zu springen, muss zusätzlich ein Name für die entsprechende Gallerie vergeben werden. In unserem Fall “lightbox[projekt1]“. Über das “title” Attribut im Link können zudem Bildunterschriften für die “Lightbox” Darstellung vergeben werden.