Computergrundkurs

Template Portfolio Bildergallerie

› download templategallerie.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 “Lighbox” für Bildergallerie

CSS-Files:

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

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

css/lightbox.css -> CSS Stile für Lightbox

JS-Files:

js/builder.js -> Initialisierung Elemente für Lightbox

js/effects.js -> Effekte Lightbox

js/lightbox.js -> Hauptskript Lightbox

js/prototype.js -> Prototype JavaScript Library (wird für Lightbox benötigt)

js/scriptaculous.js -> scriptaculous JavaScript Library (wird für Lightbox benötigt)

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

images/bullet.gif -> wird für Lightbox benötigt

images/close.gif -> “close” Button Lightbox

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

images/loading.gif -> Ladegrafik Lightbox

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

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

Einsatz Lightbox für Bildergallerie:

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

http://www.huddletogether.com/projects/lightbox2/

Diese ist im Netz sehr verbreitet und bietet einen hohe Browserkompatibilität. Unter dem Stichwort “Lightbox” können aber auch alternative Skripte im Netz gefunden werden, die eine ähnliche Funktionalität bieten.

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

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!-- js lightbox -->
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.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.

Link Tutorial zum Einbinden der “Lightbox” auf Deutsch:

http://tutorials.designnation.de/workshop/Lightbox-JS-v20-einbinden