Überall auf Internetseiten werden gerne Bilder eingesetzt um den Text etwas aufzulockern. Doch manchmal reicht eine kleine Variante eines Bildes nicht aus und man möchte mit einem Klick das Bild vergrößern.
Wenn wir auf unseren Internetseiten große Bilder darstellen wollen ist das kaum möglich ohne die gesamte Inhaltsfläche der Seite auszufüllen. Dies ist aber selten sinnvoll oder gar erwünscht.
Jetzt gibt es verschiedene Möglichkeiten die Bilder erst in klein darzustellen und bei einem Klick darauf groß werden zu lassen.
Eine eher unelegante Lösung wäre es per Popup zu machen. In einer neuen Seite öffnet sich das Bild in groß. Popup Blocker und die mangelnde Bereitschaft zu viele Browserfenster geöffnet zu haben, machen dies jedoch zu einem unschönen Lösungsweg.
Viel schöner und besser ist ein JavaScript das auf den Namen: Lightbox 2 hört.
Mit der Lightbox werden Bilder auf der Seite selbst geladen und mit einem schönen Überblendeffekt angezeigt. Außerdem ist es möglich zwischen mehreren Bildern hin und her zu navigieren, ohne erst wieder zurück auf die Internetseite gehen zu müssen.
Eine Demonstration, wie Lightbox letztendlich auf der Website aussieht, könnt Ihr auf der offiziellen Seite des Programmierers betrachten.
Eingebunden wird das Script denkbar einfach.
Nach dem Ihr die erforderlichen Dateien im Header verlinkt habt, muss danach dem Bild noch gesagt werden, dass es mit dem JavaScript geöffnet werden soll. Das passiert über rel="lightbox". Ist dieser Tag in dem Bild vorhanden, wird es mit dem schönen Effekt geöffnet.
<a href="bild_gross.jpg" rel="lightbox">Textlink zum Bild</a>
Natürlich kann man auch eine kleine Version des Bildes innerhalb des Linkes platzieren um so ein "Thumbnail" zu erhalten.
Wenn Ihr mehrere Bilder miteinander verlinken wollt, also die Möglichkeit schaffen möchtet unter den Bildern hin und her zu klicken ohne zurück zur Übersicht gehen zu müssen, muss in dem Link ein entsprechender Verweis stehen.
Alle Bilder die mit [gruppe1] versehen sind, können jetzt durchgeklickt werden. Durch diese Bezeichnung können auch mehrere Gruppen auf einer Seite erstellt werden. Die Bezeichnung muss im übrigen nicht so lauten, dort ist der Kreativität fast keine Grenzen gesetzt.
Kommentare (8)
