Hi everyone,
I really need urgent help with a slider I am using on a client's website. It is designed to work on Prestashop ecommerce software and is running absolutely fine (with a number of cosmetic changes I've made).
However, my client has insisted that it 'auto-scrolls' (auto-plays) through the product list (shown at the left of the slider as thumbnails). Please see this website for the live example >>
http://monebrothersdiy.co.uk. As you can see, it only works manually at the moment when you click on a thumbnails.
There is just the 'engine'js' file in the folder that needs amending but I am not primarily a programmer and I'm not familiar with 'dojo JS'. Everything I have tried doesn't work.
Could someone please advise on what I would need to add to make this slider auto-scroll (auto-play)?? This is rather urgent as this is the final problem to overcome before I can sign off this project. I've posted all of the .engine.js. file below.
Many thanks in advance! If you need to see any other parts of this module, please let me know
Code:
dojo.require("dojo.fx");
dojo.require("dojo.fx.easing");
WWViewer = {
};
dojo.declare("WWViewer", null, {
constructor: function(args) {
dojo.mixin(this,args);
this.lock = false;
this.node = dojo.byId(this.node);
this.blockheight = 60;
this.left = dojo.query('.WW-innerleft', this.node)[0];
this.left.onselectstart = function() {return false;}
this.left.onmousedown = function() {return false;}
this.leftcontents = dojo.query('td.WW-leftcontent', this.left);
this.leftshadows = dojo.query('td.WW-shadow', this.node);
this.rightcontents = dojo.query('.WW-rightcontent', this.node);
dojo.forEach(this.leftcontents,function(content, i){
this.leftcontents[i].addHover = this.leftshadows[i];
this.leftcontents[i].index = i;
dojo.connect(content,"onmouseenter", function(){dojo.addClass(this.addHover,"WW-hover");});
dojo.connect(content,"onmouseleave", function(){dojo.removeClass(this.addHover,"WW-hover");});
dojo.connect(content,"onclick", dojo.hitch(this, "glideTo", i));
}, this);
this.start(4);
},
start: function(index){
dojo.style(this.left, "top", -(index-2)*this.blockheight+"px");
dojo.addClass(this.leftcontents[index],"WW-selected");
dojo.addClass(this.leftshadows[index],"WW-selected");
dojo.style(this.rightcontents[index],"display", "block");
this.current = index;
},
glideTo: function(index){
if(this.lock) return;
this.lock = true;
var top = dojo.style(this.left,"top");
var move = dojo.position(this.leftcontents[index],true).y-dojo.position(this.leftcontents[this.current],true).y;
var anim = dojo.animateProperty({node: this.left, properties: {top: top - move}, duration: this.effect, rate: 33});
dojo.connect(anim, "onEnd", dojo.hitch(this, "movingblocks", this.leftcontents[this.current].index-this.leftcontents[index].index));
anim.play();
dojo.removeClass(this.leftcontents[this.current],"WW-selected");
dojo.removeClass(this.leftshadows[this.current],"WW-selected");
dojo.addClass(this.leftcontents[index],"WW-selected");
dojo.addClass(this.leftshadows[index],"WW-selected");
dojo.style(this.rightcontents[this.current],"display", "none");
dojo.style(this.rightcontents[index],"display", "block");
this.current = index;
},
movingblocks : function(blocknum){
var top = dojo.style(this.left,"top");
if(blocknum > 0){
for(var x = 0; x < blocknum; x++){
var t = dojo.query("table", this.left);
dojo.place(t[t.length-1], this.left, "first");
top-=this.blockheight;
dojo.style(this.left,"top", top+"px");
}
}else if(blocknum < 0){
for(var x = 0; x < -blocknum; x++){
dojo.place(dojo.query("table", this.left)[0], this.left, "last");
top+=this.blockheight;
dojo.style(this.left,"top", top+"px");
}
}
dojo.query('td.WW-leftcontent', this.left).forEach(function(content, i){
content.index = i;
});
this.lock = false;
}
});
Before you post, read our: 
