PDA

View Full Version : 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/dynamicindex14/leftrightslide.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 (http://home.comcast.net/~jscheuer1/side/files/conveyor_oo.htm) and view the page source to see how it's done.


<!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:

<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. (https://addons.mozilla.org/en-US/firefox/addon/web-developer/) 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/side/files/conveyor_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
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:

//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>