JS Bildergalerie - mir "verschluckt's" Bilder

akdesign

Erfahrenes Mitglied
Hallo,

ich habe eine JS Gallerie - allerdings werden mir hier Bilder sozusagen verschluckt.
Mir werden die ersten beiden Bilder angezeigt und danach das Letzte, die Bilder dazwischen sind unterwegs wohl irgendwie verloren gegangen.

Hat jemand eine Idee, wo mein Fehler liegt?

Code:
// JavaScript Document


document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

var    gallery,
    el,
    i,
    page,
    dots = document.querySelectorAll('#nav li'),
    slides = [
        {
            img: 'images/DeepCleansing.jpg',
            width: 638,
            height: 850,
            desc:"<span class='produkt_head'>Spina Organics Deep Cleansing Dog Body Wash</span><br>"  +
            "<span class='produkt'>This Green Tea Leaf Extract body wash helps restore the fur's natu ral oils and moisture balance. A synergetic blend of roots, herbs, Argan and Moringa seed oils, cleansing agents, and earth minerals gently removes dirt and regulates the natural pH balance.</span>"
        },
        {
            img: 'images/ItchRelief.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Itch Relief Dog Body Wash'
        },
        {
            img: 'images/Refresher.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Rejuvenating Mist Fur Refresher'
        },
        {
            img: 'images/Puppy.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Gentle & Tear-free Puppy Body Wash'
        },
        {
            img: 'images/Detangler.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Leave-in Conditioner Fur Detangler'
        },
        {
            img: 'images/Hydrating.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Hydrating Dog Body Wash'
        },
        {    img: 'images/BlackAndGrey.jpg',
            width: 638,
            height: 850,
            desc: 'Black & Grey Dog Body Wash'
        },
        {    img: 'images/Miracolo.jpg',
            width: 638,
            height: 850,
            desc: 'Hot Spot Treatment Miracolo Oil'
        },
    ];

gallery = new SwipeView('#wrapper', { numberOfPages: slides.length });

// Load initial data
for (i=0; i<3; i++) {
    page = i==0 ? slides.length-1 : i-1;
    el = document.createElement('img');
    el.className = 'loading';
    el.src = slides[page].img;
    el.width = slides[page].width;
    el.height = slides[page].height;
    el.onload = function () { this.className = ''; }
    gallery.masterPages[i].appendChild(el);

    el = document.createElement('span');
    el.innerHTML = slides[page].desc;
    el.className = 'produkt_head';
    gallery.masterPages[i].appendChild(el);
}

gallery.onFlip(function () {
    var el,
        upcoming,
        i;

    for (i=0; i<3; i++) {
        upcoming = gallery.masterPages[i].dataset.upcomingPageIndex;

        if (upcoming != gallery.masterPages[i].dataset.pageIndex) {
            el = gallery.masterPages[i].querySelector('img');
            el.className = 'loading';
            el.src = slides[upcoming].img;
            el.width = slides[upcoming].width;
            el.height = slides[upcoming].height;
           
            el = gallery.masterPages[i].querySelector('span');
            el.innerHTML = slides[upcoming].desc;
        }
    }
   
    document.querySelector('#nav .selected').className = '';
    dots[gallery.pageIndex+1].className = 'selected';
});

gallery.onMoveOut(function () {
    gallery.masterPages[gallery.currentMasterPage].className = gallery.masterPages[gallery.currentMasterPage].className.replace(/(^|\s)swipeview-active(\s|$)/, '');
});

gallery.onMoveIn(function () {
    var className = gallery.masterPages[gallery.currentMasterPage].className;
    /(^|\s)swipeview-active(\s|$)/.test(className) || (gallery.masterPages[gallery.currentMasterPage].className = !className ? 'swipeview-active' : className + ' swipeview-active');
});

// JavaScript Document
 
Hmmm, habe gerade herausgefunden, wenn ich das letzte Bild lösche, kommen alle Bilder. Sobald ich wieder eines hinzufüge, werden die anderen wieder verschluckt.
Habe ich irgendwo eine Begrenzung in der Anzahl der Bilder drin?
 
Code:
        {    img: 'images/Miracolo.jpg',
            width: 638,
            height: 850,
            desc: 'Hot Spot Treatment Miracolo Oil'
        }, // hier sollte kein Komma stehen
    ];
AFAIK sind die Interpreter jedoch relativ tolerant in dieser Hinsicht.
Am besten postest Du mal die URL der Seite, damit man es sich ansehen kann. Könnte vielleicht ein Syntaxfehler in dem Array sein. Hast Du schon in die Console geschaut?
 
Console zeigt hier in gallery.js einen Fehler an:
Code:
    document.querySelector('#nav .selected').className = '';
Scheint irgend wie mit einer Navigation zu tun zu haben, die es wohl nicht gibt. Wahrscheinlich musst Du diese Zeile löschen.
 
Zurück