Multiple belt slideshows help

**alaia** · 12-12-2011, 09:38 PM

1) Script Title: Conveyor Belt slideshow script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rightslide.htm

3) Describe problem: how can i add multiple conveyror belt slideshows in the same page? i want to have two or more slideshows on the same page running concurrently using the same code above. E.g. slideshow1 & 2 running in parallel with same script.
is this possible?

**mlegg** · 12-12-2011, 09:58 PM

Look at this page and view the page source to see how it's done.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified for multiple use in http://www.dynamicdrive.com/forums by:
* John Davenport Scheuer - username:jscheuer
***********************************************/

//Specify the slider images
var slider=new Array()
slider[0]='<a href="http://"><img src="photo1.jpg" border=1></a>'
slider[1]='<a href="http://"><img src="photo2.jpg" border=1></a>'
slider[2]='<a href="http://"><img src="photo3.jpg" border=1></a>'
slider[3]='<a href="http://"><img src="photo4.jpg" border=1></a>'
slider[4]='<a href="http://"><img src="photo5.jpg" border=1></a>'

//Specify a second slider images (use only for more than one show, use as many as needed)
var slider2=new Array()
slider2[0]='<a href="http://"><img src="photo6.jpg" border=1></a>'
slider2[1]='<a href="http://"><img src="photo7.jpg" border=1></a>'
slider2[2]='<a href="http://"><img src="photo8.jpg" border=1></a>'
slider2[3]='<a href="http://"><img src="photo9.jpg" border=1></a>'
slider2[4]='<a href="http://"><img src="photo1.jpg" border=1></a>'

////NO NEED TO EDIT BELOW THIS LINE////////////
function cbelt(slide, width, height, speed, bg, igap, sgap, altgap){
if(!document.getElementsByTagName||!document.createElement)
return;
if(!cbelt.ar)
cbelt.ar=[];
cbelt.ar[this.slid=cbelt.ar.length]=this;
this.slide='<nobr>'+slide.join(igap)+'<\/nobr>';
this.width=width;
this.height=height;
this.copyspeed=this.speed=speed;
this.sgap=sgap;
this.altgap=sgap-speed;
this.tspan=document.createElement('span');
this.tspan.id='temp'+this.slid;
this.tspan.style.visibility='hidden';
this.tspan.style.position='absolute';
this.tspan.style.top='-1000px';
this.tspan.style.left='-9000px';
this.tspan.innerHTML=this.slide;
with (document){
write('<table border="0" cellspacing="0" cellpadding="0"><td>')

write('<div style="position:relative;width:'+this.width+'px;height:'+this.height+'px;overflow:hidden">')
write('<div style="position:absolute;width:'+this.width+'px;height:'+this.height+'px;background-color:'+bg+'" onmouseover="cbelt.ar['+this.slid+'].copyspeed=0" onmouseout="cbelt.ar['+this.slid+'].copyspeed=cbelt.ar['+this.slid+'].speed">')
write('<div id="test2'+this.slid+'" style="position:absolute;left:0px;top:0px"><\/div>')
write('<div id="test3'+this.slid+'" style="position:absolute;left:-1000px;top:0px"><\/div>')
write('<\/div><\/div>')

write('<\/td><\/table>')
}
document.body.insertBefore(this.tspan, document.body.firstChild)
this.fillup();
}

cbelt.prototype.fillup=function(){
var cacheobj=this;
this.timgs=document.getElementById('temp'+this.slid).getElementsByTagName('img')
for (var i_tem = 0; i_tem < this.timgs.length; i_tem++)
if(typeof this.timgs[i_tem].complete=='boolean'&&!this.timgs[i_tem].complete){
setTimeout(function(){cacheobj.fillup();}, 300);
return;
}
this.cross_slide=document.getElementById("test2"+this.slid);
this.cross_slide2=document.getElementById("test3"+this.slid);
this.cross_slide.innerHTML=this.cross_slide2.innerHTML=this.slide;
this.actualwidth=document.getElementById("temp"+this.slid).offsetWidth;
this.cross_slide2.style.left=this.actualwidth+this.sgap+"px"

this.lefttime=setInterval(function(){cacheobj.slideleft();}, 30);
}


cbelt.prototype.slideleft=function(){
if (parseInt(this.cross_slide.style.left)>(this.actualwidth*(-1)+8))
this.cross_slide.style.left=parseInt(this.cross_slide.style.left)-this.copyspeed+"px"
else{
this.cross_slide.style.left=parseInt(this.cross_slide2.style.left)+this.actualwidth+(this.agap? this.sgap : this.altgap)+"px"
this.agap=!this.agap;
}
if (parseInt(this.cross_slide2.style.left)>(this.actualwidth*(-1)+8))
this.cross_slide2.style.left=parseInt(this.cross_slide2.style.left)-this.copyspeed+"px"
else{
this.cross_slide2.style.left=parseInt(this.cross_slide.style.left)+this.actualwidth+(this.agap? this.sgap : this.altgap)+"px"
this.agap=!this.agap;
}
}

</script>
</head>
<body>
<script type="text/javascript">
/* array_name - name of array of images for this show (unquoted variable name)
 * width - show pixel width (unquoted integer)
 * height - show pixel height (unquoted integer)
 * speed - show speed - larger is faster ex:3 (unquoted integer) (range: 1-10)
 * 'bgcolor' - show background-color, ex:'white' or '#eaeaea' (quoted string)
 * 'image_gap' - gap between each image, use HTML, or space character (quoted string)
 * slide_gap - pixels gap between each slideshow rotation (unquoted integer) */

//Usage:
//new cbelt(array_name, width, height, speed, 'bgcolor', 'image_gap', slide_gap)
new cbelt(slider, 300, 225, 2, '#eaeaea', ' ', 4);
</script>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
<script type="text/javascript">
new cbelt(slider2, 300, 225, 3, '#eaeaea', ' ', 4);

</script>
</body>
</html>

**alaia** · 12-13-2011, 08:33 AM

and how can i put the two slideshows in the position i want? i want to have more space between but i can't move them. do you know how?

**mlegg** · 12-13-2011, 03:47 PM

See in the code this line:

HTML Code:

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

You can add content after that and between the next line and it will be in between the top and bottom slideshow. Do you have Firefox? If so, grab the Web Developer Toolbar add-on. Once installed you will have a small toolbar and you will see one spot that says Miscellaneous. Click on that and you will see Edit HTML. Now you can fiddle around with the HTML to see what the changes you are making will look like. It has many features, such as CSS editing too.

**alaia** · 12-14-2011, 11:11 AM

thank you!!! you are so helpful..
can i ask you something more? the code that you gave me is for two slideshows can i add more?

**alaia** · 12-14-2011, 12:12 PM

you will take a look at this site http://home.comcast.net/~jscheuer1/s...onveyor_oo.htm

but this is only for two slideshows and now i have the same problem with you..i want for more slideshows and i dont know what changes i have to do..
if someone can help i will appreciate

**alaia** · 12-14-2011, 12:26 PM

here you can find my page which is underconstraction
i want to have many slideshows, i;ve made the code for two but the second slideshow doesnt appear and i want help to make this page with multiple parelle slideshows

**mlegg** · 12-14-2011, 03:41 PM

Originally Posted by alaia

thank you!!! you are so helpful..
can i ask you something more? the code that you gave me is for two slideshows can i add more?

Yes you can have more. How many are you going to have? Remember that adding more can/will make your site load slower, especially if someone does not have a high speed connection.

See this line in the code:

Code:

//Specify a second slider images (use only for more than one show, use as many as needed)
var slider2=new Array()
slider2[0]='<a href="http://"><img src="photo6.jpg" border=1></a>'
slider2[1]='<a href="http://"><img src="photo7.jpg" border=1></a>'
slider2[2]='<a href="http://"><img src="photo8.jpg" border=1></a>'
slider2[3]='<a href="http://"><img src="photo9.jpg" border=1></a>'
slider2[4]='<a href="http://"><img src="photo1.jpg" border=1></a>'

To add another one copy that code (of course customize to your needs) and change the number 2 where it says var slider2 to say 3 and so on for each additional slideshow.

**alaia** · 12-15-2011, 10:10 AM

Yes i know this for the speed.. i'll try it and if it is so slow i'll find an other option..
i will copy this code but have i make changes here??or i'll keep it with no changes? :

////NO NEED TO EDIT BELOW THIS LINE////////////
function cbelt(slide, width, height, speed, bg, igap, sgap, altgap){
if(!document.getElementsByTagName||!document.createElement)
return;
if(!cbelt.ar)
cbelt.ar=[];
cbelt.ar[this.slid=cbelt.ar.length]=this;
this.slide='<nobr>'+slide.join(igap)+'<\/nobr>';
this.width=width;
this.height=height;
this.copyspeed=this.speed=speed;
this.sgap=sgap;
this.altgap=sgap-speed;
this.tspan=document.createElement('span');
this.tspan.id='temp'+this.slid;
this.tspan.style.visibility='hidden';
this.tspan.style.position='absolute';
this.tspan.style.top='-1000px';
this.tspan.style.left='-9000px';
this.tspan.innerHTML=this.slide;
with (document){
write('<table border="0" cellspacing="0" cellpadding="0"><td>')

write('<div style="position:relative;width:'+this.width+'px;height:'+this.height+'px;overflow:hidden">')
write('<div style="position:absolute;width:'+this.width+'px;height:'+this.height+'px;background-color:'+bg+'" onmouseover="cbelt.ar['+this.slid+'].copyspeed=0" onmouseout="cbelt.ar['+this.slid+'].copyspeed=cbelt.ar['+this.slid+'].speed">')
write('<div id="test2'+this.slid+'" style="position:absolute;left:0px;top:0px"><\/div>')
write('<div id="test3'+this.slid+'" style="position:absolute;left:-1000px;top:0px"><\/div>')
write('<\/div><\/div>')

write('<\/td><\/table>')
}
document.body.insertBefore(this.tspan, document.body.firstChild)
this.fillup();
}

cbelt.prototype.fillup=function(){
var cacheobj=this;
this.timgs=document.getElementById('temp'+this.slid).getElementsByTagName('img')
for (var i_tem = 0; i_tem < this.timgs.length; i_tem++)
if(typeof this.timgs[i_tem].complete=='boolean'&&!this.timgs[i_tem].complete){
setTimeout(function(){cacheobj.fillup();}, 300);
return;
}
this.cross_slide=document.getElementById("test2"+this.slid);
this.cross_slide2=document.getElementById("test3"+this.slid);
this.cross_slide.innerHTML=this.cross_slide2.innerHTML=this.slide;
this.actualwidth=document.getElementById("temp"+this.slid).offsetWidth;
this.cross_slide2.style.left=this.actualwidth+this.sgap+"px"

this.lefttime=setInterval(function(){cacheobj.slideleft();}, 30);
}

cbelt.prototype.slideleft=function(){
if (parseInt(this.cross_slide.style.left)>(this.actualwidth*(-1)+8))
this.cross_slide.style.left=parseInt(this.cross_slide.style.left)-this.copyspeed+"px"
else{
this.cross_slide.style.left=parseInt(this.cross_slide2.style.left)+this.actualwidth+(this.agap? this.sgap : this.altgap)+"px"
this.agap=!this.agap;
}
if (parseInt(this.cross_slide2.style.left)>(this.actualwidth*(-1)+8))
this.cross_slide2.style.left=parseInt(this.cross_slide2.style.left)-this.copyspeed+"px"
else{
this.cross_slide2.style.left=parseInt(this.cross_slide.style.left)+this.actualwidth+(this.agap? this.sgap : this.altgap)+"px"
this.agap=!this.agap;
}
}

</script>

Thread: Multiple belt slideshows help

Thread Tools

Search Thread

Multiple belt slideshows help

Bookmarks

Bookmarks

Posting Permissions