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?
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