js_popup.js von Felix Riesterer

[ottogal]

Hallo in die Runde (und Hallo Felix),

ich habe (mit nur wenig Javascript-Erfahrung) den Versuch gemacht, das Script  js_popup.js  so zu modifizieren, dass durch Klick auf die Popup-Box diese sich nicht schließt, sondern das Folgebild angezeigt wird (Reihenfolge wie im Array allLinks - ich habe übrigens nur eine Galerie auf der Seite, d.h. nur ein div mit der Trigger-Klasse.) Es geht aber noch nicht so, wie ich wollte.

Dies sind meine Änderungen:

Zu den controls folgende hinzugefügt:

    imgIndex : 0,     // Nr. des gerade angezeigten Bildes  
    maxIndex : 0,     // Anzahl der Bilder der Serie  
    linksArray : []   // eine "globale" Kopie von allLinks aus der Funktion  initPopupBox  

Zu den functions folgende hinzugefügt:

    // Nächstes Bild laden und anzeigen  
    shownext : function () {  
        if (jsPopup.controls.imgIndex < jsPopup.controls.maxIndex) {  
            jsPopup.functions.preload(jsPopup.controls.linksArray[jsPopup.controls.imgIndex++]);  
            jsPopup.functions.display();  
            }  
        else {  
            jsPopup.htmlElements.div.style.display = "none";  
            jsPopup.controls.imgIndex = 0;  
            }  
            return false;  
        },  

In der initPopupBox-Funktion die Zeilen

	// Die eigentliche Box mit der Vollansicht in das Popup-Eltern-DIV einhängen und click-Ereignis zuweisen  
jsPopup.htmlElements.div.appendChild(jsPopup.htmlElements.box);  
jsPopup.functions.addEvent("click", jsPopup.htmlElements.div, jsPopup.functions.hide);  
jsPopup.functions.addEvent("click", jsPopup.htmlElements.box, jsPopup.functions.hide);  

geändert in

	// Die eigentliche Box mit der Vollansicht in das Popup-Eltern-DIV einhängen und click-Ereignis zuweisen  
jsPopup.htmlElements.div.appendChild(jsPopup.htmlElements.box);  
jsPopup.functions.addEvent("click", jsPopup.htmlElements.box, jsPopup.functions.shownext);  

und nach der for-Schleife über das allLinks-Array folgendes eingefügt:

  // Werte an Control-Variablen übergeben  
        jsPopup.controls.linksArray = allLinks;  
        jsPopup.controls.maxIndex = allLinks.length;  

Das mit dem Weiterschalten der Bilder klappt schon ganz schön, auch dass sich nach dem letzten die Popup-Box schließt.

Aber es bleiben einige Probleme:

(1)  Beim erstmaligen Klick auf irgendein Thumbnail geht die Popup-Box auf und zeigt richtig das zugehörige Großbild an. Beim Klick darauf wird dann aber das erste Bild der Serie angezeigt, statt des Nachfolger-Bilds des aktuellen. Weitere Klicks wandern brav durchs Array. Der mit 0 initialisierte  imgIndex  müsste also auf den zum angeklickten Thumb gehörenden Wert gesetzt werden. Ich sehe nicht, wie ich das hinbekommen kann.

(2)  Der Schließen-Button zeigt zwar beim Hovern die Hand als Cursor, beim Anklicken erfolgt aber dieselbe Reaktion wie beim Klicken ins Bild: Das Folgebild wird angezeigt.
(Übrigens war es auch beim unmodifierten Script so, dass kein Unterschied war, ob man auf den Button oder ins Bild klickte: In beiden Fällen wurde die Box geschlossen.)
Da fehlt wohl irgendwie ein onClick-Event für den Button.

(3)  Unschön ist ein Flackern zwischen den Bildwechseln. Wenn das nächste Bild erst geladen wird, erscheint eine verkleinerte Box ohne Image, die dann erst durch die große mit dem neuen Bild ersetzt wird. Lässt sich das unterbinden?

Sachdienliche Hinweise sind sehr willkommen!
Danke schonmal und viele Grüße
ottogal