jobo: lightbox onload

Hallo,

eine Kollegin möchte ein Lightboxfenster onload starten. Der Link sieht so aus:

<a href="images/sonstewas.jpg"
rel="lightbox"
id="image001"
title="hier klicken">
<img src="images/thumb_sonstewas.jpg">
</a>

Ich tippe mal, dass lightbox sich all die Anker "schnappt", die ein rel-Attribut mit dem Wert "lightbox" haben und dann das Bild im href-Attribut als Quelle für die Lightbox verwenden. Wobei ich grad rätsel, ob die id noch eine Rolle spielen könnte. Und ich mich Frage, ob in der Funktion, die dem Eventhandler onclick zugewiesen wird, per "this" auf das Element referenziert wird (this.href zB.). Wüsste ich das, wüsste ich vielleicht auch, was man dann in
window.onload = function () {
  ey_start_mal_die_lightbox_mit_der_quelle("images/sonstewas.jpg");
}
steht müsste.

Gruß

jobo

  1. Hallo,

    Ich tippe mal, dass lightbox sich all die Anker "schnappt", die ein rel-Attribut mit dem Wert "lightbox" haben und dann das Bild im href-Attribut als Quelle für die Lightbox verwenden. Wobei ich grad rätsel, ob die id noch eine Rolle spielen könnte. Und ich mich Frage, ob in der Funktion, die dem Eventhandler onclick zugewiesen wird, per "this" auf das Element referenziert wird (this.href zB.).

    die Antwort auf Deine Frage, Dein Tippen und Dein Rätseln findest Du im Lightbox-Quellcode, ich hab Dir ein paar relevanten Zeilen rauskopiert.

    	// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for  
    	// 'lightbox' references and applies onclick events to appropriate links.  
      
    [...]  
      
    			// 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;}  
    			}  
    
    

    a) Du tippst richtig,
    b) die Antwort auf das Rätsel heißt "nein" und
    c) ja, das Element wird mit this referenziert.

    und d) Du könntest mit elem.onclick() zum Ziel gelangen, wenn Du über getElementById() Zugriff auf das relevante Element elem bekommst, d.h. für *Dich* könnte die id eine Rolle spielen.

    Freundliche Grüße

    Vinzenz

    1. Hallo Vinzenz,

      und d) Du könntest mit elem.onclick() zum Ziel gelangen, wenn Du über getElementById() Zugriff auf das relevante Element elem bekommst, d.h. für *Dich* könnte die id eine Rolle spielen.

      mySpecialElement = document.getElementById("mySpecialId");
      mySpecialElemen.onclick( ... äh ... und jetzt. Wie löse ich denn den onclick aus?

      Oder

      myLightbox.start(mySpecialElement) // statt this eben das mySpecialElement ???

      Dank und Gruß

      Rober aka jobo

      Ps. Wenn du jetzt sagst: probiers doch aus, hast du vermutlich recht. Vermutlich aber nicht mehr heute. Variante zwei scheint mir plausibel, denn this und mySpecialElement sollten ja in dem Fall das selbe sein (in Bezug auf das eine Element mit der Id "mySpecialId" oder eben "image001"...;

      1. Hallo,

        und d) Du könntest mit elem.onclick() zum Ziel gelangen, wenn Du über getElementById() Zugriff auf das relevante Element elem bekommst, d.h. für *Dich* könnte die id eine Rolle spielen.

        mySpecialElement = document.getElementById("mySpecialId");
        mySpecialElemen.onclick( ... äh ... und jetzt. Wie löse ich denn den onclick aus?

        gar nicht. Du rufst einfach den Eventhandler auf. Das geht wie jeder andere Funktionsaufruf einer Funktion, die keine Parameter erwartet - und so wie ich es schon geschrieben hatte:

        mySpecialElement.onclick();

        Ich weiß: das war zu einfach :-)

        Freundliche Grüße

        Vinzenz

        1. Hallo,

          Ich weiß: das war zu einfach :-)

          Ja fein! Zu einfach gibts nicht. Guts Nächtle (;-).

          Gruß

          jobo

        2. Hallo,

          komisch nur, dass in dem mit Javascript-Ressourcen vollgestopften code

          window.onload = function() {
          alert("hallo");
          }

          nix bewirkt.

          Und am Ende des HTML-Bereiches, also direkt vor </body> testete ich grade:

            
          <script type="text/javascript">  
              xyzBild = document.getElementById("image001");  
              alert(xyzBild);  
              xyz.onclick();  
          </script>  
          
          

          Das alert(xyzBild) gibt mir den Inhalt des href-Attributs des Ankers mit der ID image001. Das scheint beim Anker aber "normal" zu sein. Aber xyz.onclick() führt er nicht aus.

          In meinem kleinen Test:

            
          <script src="onclick.js"></script>  
          <a href="abc">abc</a>  
          -  
          <a href="abcd">abcd</a>  
          -  
          <a href="abcde">abcde</a>  
          -  
          <a href="mitId" id="mitId">abcde</a>  
          
          

          mit onclick.js

            
          window.onload = function() {  
          	alert("hallo");  
          	myAnchors = document.getElementsByTagName("a");  
          	alert(myAnchors);  
          	for (i=0; i<myAnchors.length;i++) {  
          		myAnchors[i].onclick = function () {  
          			alert("test");  
          			testFunc(this);  
          			return false;  
          		}  
          	}  
          	document.getElementById("mitId").onclick();  
          }  
          testFunc = function (elem) {  
          	alert(elem.href);  
          }  
          
          

          geht alles wies sein soll.

          Gruß

          jobo

          1. Hallo,

            window.onload = function() {
            alert("hallo");
            }

            nix bewirkt.

            Na das zweite überschreibt das erste window.onload(). Will heißen: durch irgendein _danach_ eingebundenes Script wird window.onload() wohl überschreiben.

            Gruß

            jobo

            1. Hallo,

              in lightbox.js sind die letzten Zeilen:

                
              function initLightbox() { myLightbox = new Lightbox();  
              var firstLight;  
              if(firstLight=document.getElementById('uah'))  
              firstLight.onclick.apply(firstLight);  
               }  
              Event.observe(window, 'load', initLightbox, false);  
              
              

              Also setzt man das fragliche Bild mit der id="uah" (was mag wohl uah heißen?) und es geht.

              zwei Fagen noch:

              Warum ...onlick.apply()? und nicht nur wie von Vinzenz vorgeschlagen nur ...onclick()?

              Warum event.observe statt window.onload

              Gruß

              jobo

              1. Hallo,

                Warum event.observe statt window.onload

                Event.observe ist prototype. Was ich nicht kapiere, ist, warum mein window.onload() davor nicht ausgeführt wurde, denn:

                "It does not replace existing handlers for that same element+event pair. It adds to the list of handlers for that pair. Using observe will never incapacitate earlier calls."
                http://www.prototypejs.org/api/event/observe

                Gruß

                jobo