Moderne Bildergalerie mit der Lightbox
Moderne Webseiten verwenden sehr gerne neue Formen zur Darstellung von einzelnen Bildern und Galerien als nur „platte“ Einbindung mittels des IMG-Befehls. Eine sehr schöne Möglichkeit ist die Lightbox, ein Skript welches Bilder per Javascript über die Seite legt.
Die Installation ist relativ enfach und zeitigt auch sofort ansehnliche Ergebnisse:
- Zunächst lädt man die aktuellste Version des Skript-Paketes unter
http://www.huddletogether.com/projects/lightbox2/#download herunter und extrahiert die Zip-Dateien in das Web-Verzeichnis.
- Danach fügt man die Verknüpfungen mit den neuen Dateien in den HEAD-Bereich der Seite ein:
<script type="text/javascript" src="/js/prototype.js">
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder">
<script type="text/javascript" src="/js/lightbox.js">
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
- Um ein Bild jetzt in die Lightbox-Galerie einzufügen, muß nur noch ein entsprechender A HREF-Befehl eingefügt werden, der die notwendigen Kommandos zum Aufruf der Lightbox enthält
<a href="/images/beispielbild.jpg" rel="lightbox" title="mein Bild">Bild 1
Sollen mehrere Bilder einer Serie per Lightbox aufgerufen werden, so muß man dies im REL-Attribut vermerken:
rel=“lightbox[Beispiel].
Beim Aufruf der veränderten Seite wird nun das Attribut REL hinzu gezogen, welches die Abhängigkeit des Ankers von einer anderen Komponente erläutert, im Falle unseres Beispiels eben „lightbox“.
Im Lightbox-Skript werden die nun verknüpften Anker verarbeitet und zu einer Galerie verbunden, die man wie bekannt leicht bedienen kann. Wenn man nun um die einzelnen Bildanker noch eine Liste drum herum setzt und das Ganze mit etwas CSS aufhübscht, dann kommt eine ganz nette Galerie bei raus.
Link zur Beispielgalerie
Hier der fertige Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lightbox Test</title>
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style>
<!--
.noList {list-style-type:none;}
.noList li {display:inline;}
.smallImg {width:150px; border:0px;}
-->
</style>
</head>
<body>
<ul>
<li><a href="images/beispiel1.jpg" rel="lightbox[gruppenname]" title="Bild Eins"><img src="images/beispiel1.jpg" class="smallImg" /></a></li>
<li><a href="images/beispiel2.jpg" rel="lightbox[gruppenname]" title="Bild Zwei"><img src="images/beispiel2.jpg" class="smallImg" /></a></li>
<li><a href="images/beispiel3.jpg" rel="lightbox[gruppenname]" title="Bild Drei"><img src="images/beispiel3.jpg" class="smallImg" /></a></li>
<li><a href="images/beispiel4.jpg" rel="lightbox[gruppenname]" title="Bild Vier"><img src="images/beispiel4.jpg" class="smallImg" /></a></li>
</ul>
</body>
</html>
Kategorie: Web-Technik
gepostet am 21. August 2009
Schlagwörter: Javascript, Lightbox, Tutorial