PDA

View Full Version : Conveyor belt slideshow



princemac
07-31-2008, 05:38 AM
1) Script Title: conveyor belt sideshow script

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

3) Describe problem:
Well first off the script works perfectly but my problem is that I can't post more than one of them on the same page. I searched this form and found someone that had the same problem:
http://www.dynamicdrive.com/forums/showthread.php?t=32653&highlight=conveyor

The Mod's resolution was to use this:
http://home.comcast.net/~jscheuer1/side/files/conveyor_oo.htm

But I want to be able to post the slideshows at different places on the website I dont want it to be one under the other.

I have one posted on one page and another posted on a different page then I have a script that brings the two pages together and there I have my problem because only one slideshow show up.

So can anyone help me out with my problem??

Thanks a million for any help.

jscheuer1
07-31-2008, 06:44 AM
Using:

http://home.comcast.net/~jscheuer1/side/files/conveyor_oo.htm

You can put them wherever you like. The code in the body from that demo:


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

shows two distinct Conveyors. They appear one over the other because they are separated only by a paragraph. The first one has more code because it includes the explanation of the variable's values and usage instructions as comments (in green in the above). By placing each one in separate table cells, or divisions, etc., they may be positioned wherever you like on your page.

princemac
07-31-2008, 07:06 AM
Thank your for your fast reply.

So basically I put this in the header of the pages that have the script:

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



And use this to specify the slideshow in the body of the pages:

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


But is there a way to be able to specify what images are used, in the body code?
For example would putting this code:

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


Here:

<script type="text/javascript">
new cbelt(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>', 300, 225, 2, '#eaeaea', ' ', 4);
</script>


Still make the script work?

Because I use a script to post to my pages and I don't want to have to go change the header every time I post a different slideshow in my webpages.

Thanks again, your help in anyway is very much appreciated.

jscheuer1
07-31-2008, 07:22 AM
Yes, but it will not work quite like that. You can just move the array definitions to right before the call though, ex:


<script type="text/javascript">
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>'
new cbelt(slider2, 300, 225, 3, '#eaeaea', ' ', 4);
</script>

If you do do this, just don't forget to remove the array definitions from the main script. Any that you leave behind there may conflict with this style of coding it.