Verständnisfrage zu LightBox Skript

[Stefan]

Hallo,

ich habe mir mal den Code des LightBox Skript angeschaut:

<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>

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Ich verstehe nicht, wie das Ereignis beim Anklicken auf das Bild ausgelöst wird. Es ist doch kein onClick-Event definiert.

Oder geschieht das durch die rel-Anweisung?

Kann dies jemand bitte erklären.

[Mathias Brodala]

Hallo Stefan.

ich habe mir mal den Code des LightBox Skript angeschaut:

<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>

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Ich verstehe nicht, wie das Ereignis beim Anklicken auf das Bild ausgelöst wird. Es ist doch kein onClick-Event definiert.

Oder geschieht das durch die rel-Anweisung?

Indirekt, ja. Aus lightbox.js:

  
// …  
  var anchors = document.getElementsByTagName('a');  
  
  // loop through all anchor tags  
  for (var i=0; i<anchors.length; i++){  
   var anchor = anchors[i];  
  
   var relAttribute = String(anchor.getAttribute('rel'));  
  
   // use the string.match() method to catch 'lightbox' references in the rel attribute  
   if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){  
    anchor.onclick = function () {myLightbox.start(this); return false;}  
   }  
  }  
// …

Es werden hier also alle Links im Dokument durchlaufen, geprüft, ob diese über ein href-Attribut und ein rel-Attribut mit dem Wert „lighbox“ verfügen. Ist das der Fall, wird dem onclick-Eventhandler die benötigte Funktionalität hinzugefügt.

Einen schönen Sonntag noch.

Gruß, Mathias

[Stefan]

Hallo Mathias,

danke dir für die Erklärung.

Eines ist mir aber noch nicht klar: Wie wird denn das Skript / die Prozedur aufgerufen, das die Links nach rel-Attribut durchsucht?

Im Body-Tag sehe ich keinen Onload-Befehl.

Und durch
<script type="text/javascript" src="js/lightbox.js"></script>

werden die Funktionen ja nur eingebunden.

Vielen Dank im voraus.

[kungschu]

Hallo.

Eines ist mir aber noch nicht klar: Wie wird denn das Skript / die Prozedur aufgerufen, das die Links nach rel-Attribut durchsucht?

werden die Funktionen ja nur eingebunden.

^^^^^^^^^^^

MfG, Kungschu.

[Steve]

Hi Kungschu,

werden die Funktionen ja nur eingebunden.

ich meinte eigentlich definiert.

Wenn ich eine JS-Funktion beim Aufruf einer Seite starten will, dann schreibe ich direkt oben im HEAD-Bereich die JS Anweisungen oder definiere beim BODY-Tag eine Onload Anweisungen.

Wie das aber beim LightBox Skript gemacht wird, das die Suchfunktion nach dem rel-Attribut gestartet wird, kann ich leider nicht erkennen.

[Patrick Andrieu]

Hallo Stefan!

Wenn ich eine JS-Funktion beim Aufruf einer Seite starten will, dann schreibe ich direkt oben im HEAD-Bereich die JS Anweisungen oder definiere beim BODY-Tag eine Onload Anweisungen.

Das ist _eine_ Möglichkeit. Neben der Trennung von Markup und Layout, sollte man aber auch eine Trennung von Markup und Fremdcode vollziehen. Dann steht alles JavaScript-Code in einer oder mehreren externen Datei(en).

Wie das aber beim LightBox Skript gemacht wird, das die Suchfunktion nach dem rel-Attribut gestartet wird, kann ich leider nicht erkennen.

Verfahre, wie ich Dir in meiner ersten Antwort mit onclick gezeigt habe. OK, hier bei onload mag es etwas komplizierter sein... Aber das Lightbox-Script ist vom Autor eigentlich sehr gut auskommentiert....

Die Funktion, die Dir Mathias vorhin aus dem Quelltext zitiert hat, und die beim Feuern von onclick aufgerufen wird, befindet sich innerhalb einer if-Anweisung, welche sich wiederum in einer for-Schleife befindet. Das ganze dient dazu, alle A-Tags nach möglichen rel-Attributen mit dem Wert 'lightbox' zu suchen - also alle »Lightbox-Links«.

Diese Anweisungsblöcke (und weitere) befinden sich wiederum in einer Function namens initLightbox(). Und jetzt schau Dir mal die allerletzte Code-Zeile im Lightbox-Script und die Funktion unmittelbar davor...

Viele Grüße aus Frankfurt/Main,
Patrick

[Stefan]

Hi Patrick,

vielen Dank für die ausführliche Antwort! Da hast du dir ja viel Mühe gemacht.

Nun ist alles, das Skript wird also durch einen Windows Event onLoad aufgerufen.

[Patrick Andrieu]

Hallo Stefan!

<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>
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Ich verstehe nicht, wie das Ereignis beim Anklicken auf das Bild ausgelöst wird. Es ist doch kein onClick-Event definiert.

Ich schick Dich mal auf Entdeckungsreise (nur eine ganz kleine, meinen bescheidenen Mitteln entprechend) ;)

Öffne »lightbox.js« in einem fähigen Texteditor und suche nach »onclick«. Dann dürfte es ein »Aha!« geben ;)

Viele Grüße aus Frankfurt/Main,
Patrick