Einen Thumbnail Slider mehrfach auf eine Seite einbauen

Diskutiere Einen Thumbnail Slider mehrfach auf eine Seite einbauen im JavaScript Forum im Bereich Programmierung; Hallo liebe Forum-Gemeinde, ich habe einen Slider gefunden, der genau das macht, was ich mir vorgestellt habe...
T

tatura

New member
Beiträge
1
Punkte Reaktionen
0
Hallo liebe Forum-Gemeinde,

ich habe einen Slider gefunden, der genau das macht,
was ich mir vorgestellt habe:
http://www.menucool.com/slider/jquery-slider-lightbox

Es war recht schwierig, einen Slider zu finden, in dem
man die Bilder auch in einer Vergrösserung ansehen kann.

Für eine Referenzen Seite sollen aber auf einer Seite
mehrere dieses Scriptes laufen: http://referenzen

Ich habe mich schon in verschiedenen Foren "schlau" gemacht
und weiss, dass ich eindeutige ID vergeben muss, damit die
Scripte wissen, was sie ansteuern sollen.

Mein JS Wissen ist nur rudimentär, deshalb sind bisher alle
Bemühungen gescheitert.

Wenn ich den unteren Slider zuerst anklicke funktioniert er
und die Bilder gehen auf. Beim oberen geht gar nichts nichts.
Wenn ich aber zuerst den oberen anklicke, dann gehen beide nicht.
Hier nochmal der Link zu der Seite:
http://referenzen

Vielleicht kennt ja hier jemand die Lösung. Das wäre toll!

Viele Grüße
Petra

So sieht der Code aus:

Code:
<script src="slider-referenzen/2014/thumbnail-slider1.js" type="text/javascript"></script>
<script src="slider-referenzen/2014/thumbnail-slider2.js" type="text/javascript"></script>
<script>
            var thumbSldr = document.getElementById("thumbnail-slider1");
            var closeBtnr = document.getElementById("closeBtn");
            var galleryImgsr = document.getElementById("myGallery1").getElementsByTagName("li");
            for (var i = 0; i < galleryImgsr.length; i++) {
                galleryImgsr[i].index = i;
                galleryImgsr[i].onclick = function (e) {
                    var li = this;
                    thumbSldr.style.display = "block";
                    mcThumbnailSlider.init(li.index);
                };
            }

            thumbSldr.onclick = closeBtnr.onclick = function (e) {
                //This event will be triggered only when clicking the area outside the thumbs or clicking the CLOSE button
                thumbSldr.style.display = "none";
            };
</script>
<script>
            
            var thumbSldl = document.getElementById("thumbnail-slider2");
            var closeBtnl = document.getElementById("closeBtn");
            var galleryImgsl = document.getElementById("myGallery2").getElementsByTagName("li");
            for (var i = 0; i < galleryImgsl.length; i++) {
                galleryImgsl[i].index = i;
                galleryImgsl[i].onclick = function (e) {
                    var li = this;
                    thumbSldl.style.display = "block";
                    mcThumbnailSlider.init(li.index);
                };
            }

            thumbSldl.onclick = closeBtnl.onclick = function (e) {
                //This event will be triggered only when clicking the area outside the thumbs or clicking the CLOSE button
                thumbSldl.style.display = "none";
            };
</script>
 
Thema:

Einen Thumbnail Slider mehrfach auf eine Seite einbauen

Oben Unten