Lightbox 2 - Bildeffekt
Ein toller Bildereffekt für Webseiten.Öffnet ohne das Browserfenster zu verändern das angeklickte Bild und vergrössert es.
Beispiele hier
Ein wenig Grundwissen für den Einbau des Scriptes braucht es allerdings.
In groben Zügen:
Vorbereitungen:
- Download das lightbox Packet hier
- Entpacke das Zip-File auf deinem Rechner
- Lade die ganze Ordnerstruktur auf den Server
Dazu: Falls du das ganze in ein Unterordner auf dem Server ablegst müssen die Bildadressen
im lightbox / css / lightbox.css und CSS-Load-Adresse angepasst werden.
HTML:
Nun muss die Webseite noch mit etws Code ausgestattet werden.
Vor dem Header muss es so aussehen:
<!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" xml:lang="de-de" lang="de-de" dir="ltr" >
Hierzu: Damit wird dem Browser erklärt dass es sich um ein Html-Dokument handelt.
Achtung: Damit kann es das Layout verhauen.(Das kann vorkommen)
Ausgetrickst habe ich das so: lösche das l bei <!DOCTYPE html PUBLIC
So siehts dann aus:
<!DOCTYPE htm 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" xml:lang="de-de" lang="de-de" dir="ltr" >
Der Internet-Explorer kann nun aber immer noch zicken machen weil die Kompatbilitäsansicht Funktion das Layout verändert.
Kopiere die beiden Zeilen in den Header
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
Javascript und CSS laden:
Damit die Seite das Java und CSS lädt brauchen wir die folgenden Zeilen im Header:
<head>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
</head>
Jetzt noch der Bildlink:
Damit auch das lightbox Script geladen wird braucht es der markierte Teil im <a href ...
<a rel="lightbox" title="Hier der Titel der in der Lightbox angezeigt werden soll" href="foto/grosses-bild.jpg">
<img border="0" src="foto/kleien-bild.jpg" width="180" height="135"></a>