rel in DOM?

[sAks]

Hallo Leute !
Habe eine Bildergalerie via DOM erstellt und möchte dazu die bekannte JS lightbox integrieren (http://www.huddletogether.com/projects/lightbox/)

Normalerweise macht man im html-Bereich einfach ein rel=lightbox in den href-Befehl wie zB. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>, sowie include man die js-datei: <script type="text/javascript" src="lightbox.js"></script> und es funktioniert.

Aber wie ist es bei DOM? Habe aElement.rel = "lightbox"; schon getestet, aber das möchte irgendwie nicht - weiß nicht mal sicher ob das so überhaupt funktionieren kann.

Grüße
sAks

[wahsaga]

hi,

Normalerweise macht man im html-Bereich einfach ein rel=lightbox in den href-Befehl wie zB. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>, sowie include man die js-datei: <script type="text/javascript" src="lightbox.js"></script> und es funktioniert.

Und, hast du mal analysiert, _wie_ es dann "funktioniert"?

Das Lightbox-Script muss sich natürlich erst mal initialisieren, alle Links abklappern, und schauen, welche ein entsprechendes rel-Attribut haben.

Aber wie ist es bei DOM? Habe aElement.rel = "lightbox"; schon getestet, aber das möchte irgendwie nicht

Natürlich, da fehlt ja das "Abklappern".
Woher soll das Lightbox-Script denn jetzt mitbekommen, dass es einen "neuen" Link mit diesem rel-Attribut gibt, wenn's ihr niemand sagt?

• weiß nicht mal sicher ob das so überhaupt funktionieren kann.

Theoretisch höchstvermutlich schon - aber eben nicht einfach so "ins Blaue hinein". Ein bisschen analysieren, wie das Script aufgebaut ist und sich seine Daten besorgt, musst du wohl schon.

gruß,
wahsaga

[sAks]

hi,

Normalerweise macht man im html-Bereich einfach ein rel=lightbox in den href-Befehl wie zB. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>, sowie include man die js-datei: <script type="text/javascript" src="lightbox.js"></script> und es funktioniert.

Und, hast du mal analysiert, _wie_ es dann "funktioniert"?

Das Lightbox-Script muss sich natürlich erst mal initialisieren, alle Links abklappern, und schauen, welche ein entsprechendes rel-Attribut haben.

Kann man dieses spezielle rel-Attribut nicht einfach verallgemeinern und für alle Bilder im script geltend machen?
Im Endeffekt soll es ja so wirken wie zB. "aElement.target = "_blank";" - alle Bilder öffnen sich in einem neuen Fenster. Dieses Element dient für alle Bilder und genau so wollte ich dieses "rel=lightbox" einbinden.

Kenn mich nur ein wenig aus, aber nicht so gut, dass ich dieses lightbox-script auseinandern nehmen und "verstehen" kann.

Gruß
sAks

[Mathias Brodala]

Hallo sAks.

Das Lightbox-Script muss sich natürlich erst mal initialisieren, alle Links abklappern, und schauen, welche ein entsprechendes rel-Attribut haben.

Kann man dieses spezielle rel-Attribut nicht einfach verallgemeinern und für alle Bilder im script geltend machen?

Wenn du von der Lightbox v1.0 sprichst, ginge dies recht einfach:

function initLightbox()  
{  
  
  if (!document.getElementsByTagName){ return; }  
  var anchors = document.getElementsByTagName("a");  
  
  // loop through all anchor tags  
  for (var i=0; i<anchors.length; i++){  
    var anchor = anchors[i];  
  
    if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){ // ← Diese Zeile …  
      anchor.onclick = function () {showLightbox(this); return false;}  
    } // ← … und diese Zeile löschen  
  }  
// …

Hier musst du lediglich den Schleifenblock modifizieren, so dass er danach etwa wie folgt aussieht:

for (var i = 0; i < anchors.length; i++) {  
  
  anchors[i] = function() {  
  
    showLightbox(this);  
    return false;  
  }  
}

Einen schönen Montag noch.

Gruß, Mathias

[sAks]

Wenn du von der Lightbox v1.0 sprichst, ginge dies recht einfach:

Hört sich ja super an, aber ich kann dir leider nicht ganz folgen. Ich post euch mal mein kompl. Script, vllt bringt das etwas mehr Licht ins Dunkel - bin am Ende mit meinem Latein :-/

<script type="text/javascript">

var bilddaten = [
   { description : "desc1", link : "http://www.test.de/bild1.jpg" },
   { description : "desc2", link : "http://www.test.de/bild2.jpg" }
];

window.onload = bildRotationStart;

function bildRotationStart () {
   //bildIndex = Math.floor(bannerdaten.length * Math.random());"
   bildIndex = "0"

var pElement = document.createElement("p");
   pElement.id = "bild";

var aElement = document.createElement("a");
   aElement.id = "bild-link";
   aElement.href = bilddaten[bildIndex].link;
   aElement.title = bilddaten[bildIndex].description;
   aElement.target = "_blank";

var imgElement = document.createElement("img");
   imgElement.id = "bild-bild";
   imgElement.alt = "";
   imgElement.src = "bilder/orgafoto/bild" + bildIndex + ".jpg";

aElement.appendChild(imgElement);
   pElement.appendChild(aElement);

//document.body.insertBefore(pElement, document.body.firstChild);
     document.getElementById("bild-container").appendChild(pElement);

// Starte den Wechsel-Intervall alle 4000 Millisekunden = 4 Sekunden
   window.setInterval("bildRotationWechsle()", 5000);
    }

function bildRotationWechsle () {
   // bildIndex um 1 erhöhen
   if (bildIndex == bilddaten.length - 1) {
      // Wenn schon am Ende der bildliste, zurücksetzen und wieder von vorne anfangen
      bildIndex = 0;
   } else {
      // Ansonsten einfach 1 addieren, um den nächsten bild zu zeigen
      bildIndex++;
   }

var bildLink = document.getElementById("bild-link")
   bildLink.href = bilddaten[bildIndex].link;
   bildLink.title = bilddaten[bildIndex].description;

var bildBild = document.getElementById("bild-bild");
   bildBild.src = "bilder/orgafoto/bild" + bildIndex + ".jpg";
}

function initLightbox()
{
  if (!document.getElementsByTagName){ return; }
  var anchors = document.getElementsByTagName("a");

for (var i = 0; i < anchors.length; i++) {

anchors[i] = function() {

showLightbox(this);
    return false;
  }
}

</script>

Hab die Zeile von Mathias auch gleich hinzugefügt, aber leider funktioniert das irgendwie nicht :-(

[molily]

Hallo,

Das Script kenne ich doch irgendwo her... ;)

var bilddaten = [
   { description : "desc1", link : "http://www.test.de/bild1.jpg" },
   { description : "desc2", link : "http://www.test.de/bild2.jpg" }
];

window.onload = bildRotationStart;

Diese Funktion wird nach dem erfolgreichen Laden des Dokuments ausgeführt...

function bildRotationStart () {
   //bildIndex = Math.floor(bannerdaten.length * Math.random());"
   bildIndex = "0"

var pElement = document.createElement("p");
   pElement.id = "bild";

var aElement = document.createElement("a");
   aElement.id = "bild-link";
   aElement.href = bilddaten[bildIndex].link;
   aElement.title = bilddaten[bildIndex].description;
   aElement.target = "_blank";

Hier wird das a-Element erzeugt. Es ist schon ganz richtig, hier auch die Logik für die Lightbox einzubauen.
Allerdings funktioniert es nicht, wie du festgestellt hast, einfach ein rel-Attribut zu setzen. Das ist im Grunde nicht dumm, nur müsste halt garantiert sein, dass die Lightbox-Initialisierung auf jeden Fall nach der Funktion bildRotationStart() ausgeführt wird - dann würde das Lightbox-Script das a-Element auch finden.

function initLightbox()

Einfach die Funktion einzubauen bringt natürlich nix (und dürfte zu einem Fehler führen, weil die Funktion bereits definiert ist). Entweder du modifizierst Lightbox oder lässt das so, wie es ist, und ergänzt deine bildRotationStart(). Letzteres dürfe am einfachsten sein. Dazu ergänzt du an obiger Stelle:

aElement.onclick = function () { showLightbox(this); return false; };

(Hatte Mathias im Grunde schon gezeigt.)

Anstatt
window.onload = bildRotationStart;
schreibst du dann
addLoadEvent(bildRotationStart);
Ansonsten würde nur initLightbox oder bildRotationStart, aber nicht beides ausgeführt.
Damit wird zuerst Lightbox ausgeführt, was aber in seiner Initialisierungsfunktion dein a-Element nicht findet, weil das erst danach eingefügt wird. Also versiehst du dieses a-Element manuell mit der Lightbox-Logik.

Mathias

[sAks]

Hallo,

Das Script kenne ich doch irgendwo her... ;)

Hey Mathias - du erinnerst dich!! Respekt ;-)

Habe wie du beschrieben hast, "window.onload = bildRotationStart;" durch
"addLoadEvent(bildRotationStart);" ersetzt und das aElement "aElement.onclick = function () { showLightbox(this); return false; };" dem zugehörigen Block hinzugefügt.

Allerdings funktioniert nun nichts mehr. Wird durch dem obigen entfernten Befehl "window.onload = bildRotationStart;" nicht das Skript gestartet? Denn, wenn ich nun den Neuen mit dem Alten wieder tausche, funktioniert das Skript wieder, allerdings was natürlich logisch ist, ohne Lightbox. Kann man den Befehl nicht modifizieren, dass er zuerst die Lightbox startet und anschließend das eigentliche Skript?

Grüße
sAks

[molily]

Hallo,

Allerdings funktioniert nun nichts mehr.

Mit einer solchen Fehlerbeschreibung kann ich auch nichts anfangen.
Die besagten Änderungen sollten funktionieren, wenn du das Lightbox-Script vor dem Rotations-Script eingebaut hast (oder beides in eine Datei packst, Rotations-Script unten, sodass dort addLoadEvent zur Verfügung steht).

Kann man den Befehl nicht modifizieren, dass er zuerst die Lightbox startet und anschließend das eigentliche Skript?

Ja, genau dazu ist der Aufruf von addLoadEvent da - wie man schon recht einfach am Namen erkennen kann, aber auch an der Kommentierung und meiner Erklärung... :)
addLoadEvent(initLightbox); steht schon im Lightbox-Script, wo auch addLoadEvent definiert ist.
addLoadEvent(bildRotationStart); fügst du dann hinzu, woraufhin erst initLightbox und dann bildRotationStart ausgeführt werden sollte.

Mathias