jQuery - lightBox - Tutorialjquery-lightbox

Das jQuery lightBox Plugin basiert auf der lightbox2 von Lokhes Dhakar, überarbeitet von Leandro Vieira Pinho und mir. Hier bekommt man alle nötigen Dateien zum Download angeboten.

Nach dem Download der Datei entpackt man den Inhalt in das Verzeichnis, das die eigene Website enthält. Es werden die Verzeichnisse "photos" (das sind die Beispielbilder), "js" (die nötigen Javascripte), "images" (die Buttons für vor und zurück) und "css" (zur Formatierung der Seite mit den großen Bildern) erstellt.

Die ebenfalls mitgelieferte index.htm zeigt beispielhaft die Funktionsweise und den Aufbau des Plugins.

Im Kopfbereich des Quelltextes stehen die Aufrufe

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

Die Funktion wird mit

<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>

aufgerufen.

Die Thumbnails werden in einen Container mit dem Namen "bilder" <div id="bilder"> gepackt und mit den größeren Bildern verlinkt (das wird durch $('#gallery a').lightBox(); angesprochen). Achtung: Das Plugin versucht auch andere (Text-)Links im Container zu parsen. Das klappt natürlich nicht.

<a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>

So sieht das bei Leandro aus, wobei der Text im title-Tag als Bildunterschrift ausgegeben wird.

Um Bilder in anderen Containern (zb "ref" wie bei mir) anzusprechen muss im Javascriptaufruf anstatt #gallery a einfach #ref a eingetragen werden.

Die Konfiguration erfolgt in der Datei jquery.lightbox-0.5.js (jquery.lightbox-0.5.min.js ist das Javascript ohne Kommentare). In den erste 40 Zeilen stehen die Angaben für Hintergrundfarbe (overlayBgColor), Transparenz des Hintergrunds (overlayOpacity), Buttons für vor und zurück (imageBtnNext und imageBtnPrev) und so weiter. Die Kommentare sind gut verständlich.

Das Plugin steht unter der freien Lizenz Creative Commons (CC BY), was bedeutet, dass unter Nennung des Namens des Urhebers und Verlinkung der Download-Seite das Plugin benutzt, verändert und weitergegeben werden darf.

Die von mir überarbeitete Version ("nächstes Bild", "voriges Bild", weißer Hintergrund, deutsches Tutorial) können Sie hier herunterladen - auch diese steht unter CC-Lizenz.

Ich habe meine Projektseite benutzt, um das (natürlich angepasste) Plugin anzuwenden. Ein Klick auf den Screenshot öffnet das größere Bild.

SCHWARZWALD.NET

Redaktionelle Informationen über alles, was der Schwarzwald touristisch so bietet. Wir betreuen die HTML-Programmierung und das Marketing der 400-Seiten Präsenz.

schwarzwald.net

REISERAT

Site über touristische Informationen über´s Reisen in alle Welt. Die Web-gerechte Formatierung der Texte und das Handling der mehr als 3000 Seiten liegt in unseren Händen.

reiserat.de

BLACKFORESTINFO

Die englische Version von Schwarzwald.net

blackforestinfo.com

FERIENHAUS IN DER TOSKANA

Unser Ferienhaus ist zu vermieten - und auch zu verkaufen.

ferienhaus-in-toscana.de

ITALIEN

Was macht diese Land so unglaublich vielfältig?

Italien

DIE SCHWÄBISCHE ALB

Wir erschließen Ihnen dieses wunderschöne Freizeit-Land.

Schwäbische Alb

FERIENBERATER

Reisegeschichten - vorgestern wie übermorgen

ferienberater.de

NATURKOSMETIK

Schön sein macht Spass. Text und Layout von PhiloPhax.

Naturkosmetik

NATURMEDIZIN

Medizin im Grünen. Text und Layout von PhiloPhax.

Naturmedizin

UNSER BIER

Layout, HTML und CSS von PhiloPhax.

bier-lexikon.lauftext.de

DER DEUTSCHE WALD

Was bringt er den Menschen? Nicht wirtschaftlich oder öko-technisch - das interessiert uns wenig. Nein: Als Lebensraum für Wandergesellen, als grüne Umwelt, als stille Stätte der Besinnung und der Träume.

DER 
            DEUTSCHE WALD

WISSEN MACHT SPASS

Informationen für Jugendliche und andere Menschen.

WISSEN 
            MACHT SPASS

SCHREIBFEHLER.INFO

Schreibfehler - müssen die sein?

SCHREIBFEHLER.INFO

TIERPARK

Unsere Autoren erzählen Erlebnisse - wie sie mit seltenen Tieren zusammentrafen, welche Erfahrungen sie machten und wo sie auf Probleme stießen.

TIERPARK

KYBERNETIK

Eine Einführung

KYBERNETIK

CYBERNETIC COMPUTER

The fascinating story of how computers work in clear, non-mathematical language

CYBERNETIC 
            COMPUTER

HOLZGERLINGEN ONLINE

Das Internetportal für Holzgerlingen.

HOLZGERLINGEN 
            ONLINE

· · PhiloPhax · Lauftext · /mobile-friendly/ · Holzgerlingen-Online · ·
· Schnelladende Layouts · Webtaugliche Texte · Suchmaschinenoptimierung · Bildbearbeitung fürs Web · Wordpress ·
· Holzgerlingen liegt bei Böblingen zwischen Stuttgart und Tübingen an der B 464 ·
· Wir berechnen im näheren Umkreis keine Anfahrtskosten. Weder nach Altdorf oder Ehningen, nach Herrenberg, Hildrizhausen oder Schönaich ·