PDA

View Full Version : 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/dynamicindex2/crawler/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
<!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>