Conveyor Belt Slideshow

**sonyak2000** · 05-25-2011, 05:24 PM

1) Script Title: Conveyor Belt Slideshow - length issues

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/index.html

3) Describe problem: Is there a way to put the conveyor belt at 100%, rather than a pixel length? I love the script, but it looks funky on some screens that are wider as the slideshow starts mid screen. If anyone can help I would appreciate it!!

**jscheuer1** · 05-26-2011, 07:12 AM

No, not really. There could be. But since there's already a script that does it:

http://www.dynamicdrive.com/dynamici...wler/index.htm

Try it out.

One thing to be aware of though. Any scrolling content like that cannot stretch in width beyond a certain point without there being gaps. The script I linked you to will stop at a certain point, won't get any wider, if it's going to cause that problem.

**sashaa** · 05-30-2011, 04:23 PM

Hi John
Can you please help me to figure out how I can change this conveyor belt slide show to vertical, top to bottom instead of left to right?

also, is there a way to change the display box of the image? i.e. say if I have 5 images and I want the size of the display box to be 3 images wide...

thank you so much in advance

**vwphillips** · 05-31-2011, 11:31 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.crawler {
  position:absolute;left:100px;top:100px;width:200px;height:400px;border:solid red 1px;
}

.inner {
  position:absolute;left:0px;top:0px;
}

.inner IMG{
  width:200px;height:150px;float:left;margin-Top:5px;
}

.inner2 {
  position:absolute;left:0px;top:0px;width:2000px;
}

.inner2 IMG {
  width:200px;height:150px;float:left;margin-Left:5px;
}

/*]]>*/
</style></head>

<body>

<div id="c1" class="crawler" onmouseover="C1.Speed=0" onmouseout="C1.Speed=-2" >
 <div class="inner" >
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/bonsai.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/beach.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/mountain.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/coco.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/water.jpg" />
 </div>
</div>

<div id="c2" class="crawler" onmouseover="C2.Speed=0" onmouseout="C2.Speed=-2" style="left:400px;width:400px;height:150px;">
 <div class="inner2" >
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/bonsai.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/beach.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/mountain.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/coco.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/water.jpg" />
 </div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcCrawler(o){
 var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],psz=obj[mde[2]],clds=slide.getElementsByTagName('*'),lst=clds[clds.length-1],sz=lst[mde[1]]+lst[mde[2]],nu=Math.ceil(psz/sz)+1,slider=document.createElement('DIV'),z0=0,spd=o.Speed,ssz=o.ParentSize;
 obj.style.overflow='hidden';
 obj.style[mde[3]]=(isFinite(ssz)&&clds[ssz]?clds[ssz][mde[1]]:psz)+'px';
 slider.style.position='absolute';
 slider.style[mde[0]]='0px';
 obj.appendChild(slider);
 for (;z0<nu;z0++){
  slide=z0>0?slide.cloneNode(true):slide;
  slide.style[mde[0]]=sz*z0+'px';
  slider.appendChild(slide);
 }
 this.mde=mde;
 this.sz=sz;
 this.slider=slider;
 this.Speed=isFinite(spd)?spd:-1;
 this.spd=this.Speed;
 this.to=null;
 this.Scroll();
}

zxcCrawler.prototype={

 Scroll:function(){
  var oop=this,spd=this.Speed,spd=isFinite(spd)?spd:this.spd,slider=this.slider,sz=this.sz,mde=this.mde[0],pos=parseInt(slider.style[mde])+spd;
  if ((spd<0&&pos<-this.sz)||(spd>0&&pos>0)){
   pos+=sz*(spd<0?1:-1);
  }
  slider.style[mde]=pos+'px';
  this.to=setTimeout(function(){ oop.Scroll(); },20);
 }

}

var C1=new zxcCrawler({
 ID:'c1',         // the unique ID name of the parent DIV.                           (string)
 Mode:'Vertical', //(optional) the mode of execution, 'Horizontal' or 'Vertical'.    (string, default = 'Horizontal')
 Speed:-2,        //(optional) the scroll speed, >0 = clockwise, <0 = anticlockwise. (number, default = -1)
 ParentSize:3     //(optional) the number of images to display.                      (number, default = the current size of the parent DIV)
});

var C2=new zxcCrawler({
 ID:'c2',
 Speed:-2
});

/*]]>*/
</script>
</body>

</html>

Thread: Conveyor Belt Slideshow

Thread Tools

Search Thread

Conveyor Belt Slideshow

Bookmarks

Bookmarks

Posting Permissions