URGENT: Need Help Adding Auto-Scroll To Slider

[Flaunt]

Hi,

 

I have a JS Slider I'm using on a clients website. It shows products of your choosing with thumbnail menus on the left and the main image on the right.

 

However, it doesn't have auto-scroll so you have to click on each thumbnail to make it change.

 

I have tried lots of different code snippets to try and make it do this but none have worked yet. I have copied the contents of the JS file to this post. Could someone more skilled in this area take a look and tell me what to add and where? I have no problems offering a donation for any time taken to do this as I really need this urgently so my client can start running his store.

 

Many thanks in advance. If there is anything you need to see, please let me know

 

PS. I have tried to contact the original developer numerous times but he is non-responsive.

 

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;
}
});

[Flaunt]

I've found someone who can help me with this issue. Thanks go to them

[pixelkicks]

Hi, did you solve this? I want to do the same thing. It's for the "Product Viewer" module by WebshopWorks, right?

 

I'll be very grateful if you can help me out here.

 

Cheers,

 

Chris.