Bilder zoomen mit Lightbox

 

Installation von Lightbox:

Folgende Zeilen gehören in den <head> Bereich der Seite (in dieser Reihenfolge!):
{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>

Das Stylesheet muss ebenfalls eingebunden werden. (Hier kann auch der Code aus der lightbox.css einfach in das bestehende Stylesheet übernommen werden.)

<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />

Dieses Stylesheet anschließend überprüfen und die Pfade folgender Dateien kontrollieren: prev.gif und next.gif

Verwendung von Lightbox:

Hierzu ist es notwendig in den Link-Tag rel="lightbox" einzufügen.
Ein Beispiel:

<a href="/images/image-1.jpg" rel="lightbox" title="mein bild"><img src="/image-1-klein.jpg" alt="mein bild" /></a>

Optional kann das title Attribut dazu verwendet werden um eine Bildunterschrift anzufügen beim zoomen.

Bilder-Gruppe:

Es ist auch Möglich zwischen mehreren Bildern hin und her zuschalten. Hierzu einfach eine Bezeichnung für die Gruppe in eckigen Klammern hinzufügen:

<a href="/images/image-1.jpg" rel="lightbox[gruppe]">image 1</a>
<a href="/images/image-2.jpg" rel="lightbox[gruppe]">image 2</a>
<a href="/images/image-3.jpg" rel="lightbox[gruppe]">image 3</a>

Hier gibt es keine Beschränkung was die Anzahl der Bilder betrifft.


Die notwendigen Dateien der Lightbox gibts hier:

download lightbox2.04.zip (96.12 KB)

(habe in dem zipfile die Datei lightbox.js mit der der Version 2.03 getauscht, da es in der 2.04 Probleme mit Firefox gab)