Naja, insgesamt ist sowas nur über ein Zusammenspiel einiger Funktionen zu realisieren. Erstmal muss für den HTML-Body ein onLoad Event initialisiert werden, welche entweder alle <img> Tags filtert und in ein Array speichert, oder nur Bilder (oder andere Tags) an Hand eines bestimmten Attributs & Attributswertes filtert. (Die Lightbox zB sucht nach Anchor-Tags, die mit dem Relation-Attribut "rel" ausgestattet sind und entweder den Wert "lightbox" oder "lightbox[setname]" beinhalten.
Mit einer so "gewonnenen" Objektmenge kann man nun arbeiten: Für jedes Objekt legt man ein onClick-Event fest: Nämlich das aufpoppen eines Containers über sämtlichem Bodycontent. Das kannst du mal ganz leicht für dich selbst probieren:
HTML:
<html>
<head>
<title>Test</title>
<script type="text/javascript"><!--
function inline_popup() {
// im DOM ein neues DIV-Objekt erzeugen mit Testinhalt
// Attribut "style" mit CSS-Deklarationen als Inhalt hinzufügen
// Styledeklaration für Container muss zB "position: absolute" beinhalten
}
--></script>
</head>
<body>
<a href="#" onclick="inline_popup(); return false">Klick mich</a>
</body>
Das nur als Ansatz zum Verständnis.
Du siehst sicherlich, dass das eine sehr komplexe Sache wird, also besser die Empfehlung, das zu benutzen, was schon ausgereift ist
Ich versuch's nochmal kurz mit der Lightbox in der Schnelle:
HTML:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
in den HTML-Head bereich einfügen. Dabei darauf achten, dass die Pfadangaben stimmen (relative / absolute HTTP-Pfade beachten!)
Die nötigen Scripte müssen natürlich auch entsprechend vorliegen.
Zu jedem Bild, was in der Lightbox erscheinen soll, fügst du nun erstmal testweise folgendes in den HTML-Body ein:
HTML:
<a href="pfad/zum/bild.jpg" rel="lightbox" title="Beschreibung (optional)">Hier klicken um LB zu öffnen</a>
Das kannst du dann, wenn es funktionert, auch noch mit Thumbnails statt des Textes machen:
HTML:
<a href="pfad/zum/bild.jpg" rel="lightbox" title="Beschreibung (optional)"><img src="pfad/zum/vorschaubild.jpg" alt="Vorschaubild: foobar" /></a>
Für genauere Ausführungen in gebrochenem Deutsch gibt es zB
Babel Fish von Altavista oder Dienste einer Suchmaschine, die ich nicht so sehr mag
Und falls alle Stricke reißen, einfach mal "Lightbox Tutorial" oder "Lightbox Anleitung" in eine Suchmaschine deiner Wahl tasten, und dich zu
Seiten wie dieser führen lassen. Viel Glück schonm
