Converyor Belt Slideshow Not Manifesting

[Chipster]

Hi...I made a new slideshow but it's not manifesting...could someone take a look at this code below and tell me what I did wrong? thanks
-Chipster

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


//Specify the slider's width (in pixels)
var sliderwidth="815px"
//Specify the slider's height
var sliderheight="220px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#transparent"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7482.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (1).jpg" border=0></a>'


leftrightslide[1]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7483.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (2).jpg" border=0></a>'


leftrightslide[2]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7484.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (3).jpg" border=0></a>'


leftrightslide[3]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7485.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (4).jpg" border=0></a>'


leftrightslide[4]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7486.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (5).jpg" border=0></a>'


leftrightslide[5]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7487.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (6).jpg" border=0></a>'


leftrightslide[6]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7488.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (7).jpg" border=0></a>'


leftrightslide[7]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7489.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (8).jpg" border=0></a>'


leftrightslide[8]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7490.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (9).jpg" border=0></a>'


leftrightslide[9]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7491.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200T/indiana/IAA (10).jpg" border=0></a>'



//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:17px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:17px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

[Beverleyh]

The images are throwing "not found" errors so check the path and letter-case (of the filename and extension) and/or upload them if necessary. There may also be other things wrong but that's the first thing to check.

Also, don't forget the correct formatting for the posts which should include the link to the script on DD so we know what we're working with.

If you need more help also provide a link to your page so we can check the problematic code.

[jscheuer1]

Right, it's the case. For example, change:

http://sportsantiques.com/2013NSCC/200T/indiana/IAA (1).jpg

to:

http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(1).jpg

The %20 just means space and is the more proper way of representing it in a src URL.

For the whole thing:

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


//Specify the slider's width (in pixels)
var sliderwidth="815px"
//Specify the slider's height
var sliderheight="220px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#transparent"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7482.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(1).jpg" border=0></a>'


leftrightslide[1]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7483.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(2).jpg" border=0></a>'


leftrightslide[2]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7484.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(3).jpg" border=0></a>'


leftrightslide[3]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7485.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(4).jpg" border=0></a>'


leftrightslide[4]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7486.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(5).jpg" border=0></a>'


leftrightslide[5]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7487.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(6).jpg" border=0></a>'


leftrightslide[6]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7488.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(7).jpg" border=0></a>'


leftrightslide[7]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7489.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(8).jpg" border=0></a>'


leftrightslide[8]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7490.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(9).jpg" border=0></a>'


leftrightslide[9]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7491.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA%20(10).jpg" border=0></a>'



//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:17px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:17px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

By the way, I added a closing script (</script>) tag because that was missing from your post. You probably just missed copying it from your page. But if it is missing from the page, that alone would prevent the script from working in at least some browsers.

[Chipster]

Beverley,
OK I got it up and running…Thank you for your help…You were right the “T” in my “200t” file was capitalized and throwing it off…Yes I will correct the initial formatting of future threads…and yes I will supply a link to the published slideshow….See it here

John,
Thank you for your help…the problem as you pointed out, was indeed the “T”.

New question 1
I am however experiencing a gap under the slideshow…scroll to near the bottom of the page in this link to see it…I tried adjusting the height of the slideshow but it didn’t help…and I can’t go smaller than 200 pixel…as that is the size of the photos…Q. How can I correct that?

BTW…As you will see the slideshow is encased in the top row of a two row table…The bottom row having corresponding explanation and commentary…

New question 2
Sometimes I may want multiple slideshows on the same page?...Will I be able to do that?

Again thanks so much Beverley and John for your help....See the code below...BTW I had to remove all but 10 lines of the photos as the system would not allow 61 of them

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


//Specify the slider's width (in pixels)
var sliderwidth="815px"
//Specify the slider's height
var sliderheight="200px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#transparent"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''

leftrightslide[0]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7482.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (1).jpg" border=0></a>'


leftrightslide[1]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7483.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (2).jpg" border=0></a>'


leftrightslide[2]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7484.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (3).jpg" border=0></a>'


leftrightslide[3]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7485.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (4).jpg" border=0></a>'


leftrightslide[4]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7486.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (5).jpg" border=0></a>'


leftrightslide[5]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7487.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (6).jpg" border=0></a>'


leftrightslide[6]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7488.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (7).jpg" border=0></a>'


leftrightslide[7]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7489.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (8).jpg" border=0></a>'


leftrightslide[8]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7490.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (9).jpg" border=0></a>'


leftrightslide[9]='<a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7491.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (10).jpg" border=0></a>'



//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:10px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:10px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

<p align="center" style="margin-top: 0; margin-bottom: 0">&nbsp;</p></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" height="78">
<p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><span style="background-color: #004699"><font color="#FFFFFF" face="Arial Black" size="3">&nbsp;
61 PHOTOS OF RICHMOND AND CENTERVILLE INDIANA
AREA - CLICK ANY PHOTO&nbsp;&nbsp;</font></span></p>
<p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font color="#004699" face="Arial Black" size="3">Street scenes, antiques stores, and essentially what I saw along the
way.&nbsp;</font></p>
<p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font color="#004699" face="Arial Black" size="3">Don't
miss the green 1960's Ford Fairlane hot rod!</font></td>
</tr>
</table>

[vwphillips]

<!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[*/

#carousel1 {
  position:relative;width:815px;height:200px;border:solid red 0px;
}

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

.belt IMG {
  float:left;margin-left:5px; /* do not use margin-right for spacing*/
}

#carousel2 {
  position:relative;width:415px;height:200px;border:solid red 1px;
}

#carousel3 {
  position:relative;width:200px;height:400px;border:solid red 1px;
}

.beltV IMG {
  float:left;margin-top:5px; /* do not use margin-bottom for spacing*/
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
//  Image Step Carousel. (18-Febuary-2014)
//  by Vic Phillips - http://www.vicsjavascripts.org/


var zxcImageCarousel={

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o){
   this.Pause(id);
   if (n>=0&&n<o.lgth&&n!=o.n){
    o.ud=n>o.n?1:-1;
    this.step(o,n);
   }
  }
 },

 Auto:function(id,ms){
  var oop=this,o=oop['zxc'+id];
  o?o.to=setTimeout(function(){ oop.step(o,true); },ms||200):null;
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 init:function(o){
  var id=o.CarouselID,m=o.Mode,ld=o.ImagePreload,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,imgs=s?s.getElementsByTagName('IMG'):[];
  if (imgs[1]){
   var ary=[],z0=0;
   o.m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?['top','left','height','offsetTop','offsetHeight']:['left','top','width','offsetLeft','offsetWidth']
   for (;z0<imgs.length;z0++){
    ary[z0]=[imgs[z0],new Image()];
    ary[z0][1].src=imgs[z0].src;
   }
   p.style.overflow='hidden';
   s.style[o.m[2]]='30000px';
   o.id=id;
   o.p=p;
   o.s=s;
   this.load(o,ary,new Date(),(typeof(ld)=='number'&&ld>0?ld:10)*1000);
  }
 },

 load:function(o,ary,d,ms){
  for (var oop=this,z0=0,z1=0;z0<ary.length;z0++){
   if (ary[z0][1].width<40&&new Date()-d<ms){
    return o.to=setTimeout(function(){ oop.load(o,ary,d,ms); },200);
   }
  }
  for (;z1<ary.length;z1++){
   if (ary[z1][1].width<40){
    ary[z1][0].parentNode.removeChild(ary[z1][0]);
    ary.splice(z1--,1);
   }
  }
  ary[1]?oop.ready(o,ary):null;
 },

 ready:function(o,ary){
  var n=o.StepIndex,ud=o.AutoDirection,add=o.AddEvents,ms=o.StepAnimate,h=o.AutoHold,srt=o.AutoStart,c=o.s.cloneNode(true),add=add instanceof Array?add:[],sz,e,t,z0=0,z1=0;
  for (;z0<ary.length;z0++){
   ary[z0][1]=ary[z0][0][o.m[3]];
  }
  o.n=ary[n]?n:0;
  sz=ary[z0-1][1]+ary[z0-1][0][o.m[4]];
  o.s.style.position='absolute';
  o.s.style[o.m[2]]=c.style[o.m[2]]=sz+5+'px';
  c.style[o.m[0]]=sz+'px';
  c.style[o.m[1]]='0px';
  o.s.appendChild(c);
  ary[z0]=[null,sz+ary[0][1]];
  o.ud=typeof(ud)=='number'&&ud<0?-1:1;
  o.lgth=z0;
  o.ms=typeof(ms)=='number'&&ms>100?ms:500;
  o.i=Math.PI/(2*o.ms);
  o.h=typeof(h)=='number'&&h>0?h:o.ms*4;
  o.s=[o.s,o.m[0],-ary[o.n][1]];
  o.s[0].style[o.m[0]]=o.s[2]+'px';
  o.ary=ary;
  for (;z1<add.length;z1++){
   if (add[z1]&&add[z1][0]){
    e=document.getElementById(add[z1][0]);
    t=add[z1][1];
    t=(typeof(t)=='string'?t:'').replace('on','');
    if (e&&t&&this[add[z1][2]]){
    this.addevt(e,t=='click'||t=='mouseover'||t=='mouseout'||t=='mousedown'?t:'mouseup',add[z1][2],o.id,add[z1][3]);
    }
   }
  }
  this['zxc'+o.id]=o;
  typeof(srt)=='number'&&srt>0?this.Auto(o.id,srt):null;
 },

 step:function(o,a){
  this.Pause(o.id);
  o.auto=a===true;
  var n=o.n;
  n=o.auto?n+o.ud:a;
  if (!o.ary[n]){
   n=o.ud>0?1:o.lgth-1;
   o.s[2]=-o.ary[o.ud>0?0:o.lgth][1];
  }
  this.animate(o,o.s,o.s[2],-o.ary[n][1],new Date(),o.ms);
  o.n=n;
 },


 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)*Math.sin(o.i*ms)+f;
  if (isFinite(n)){
   a[2]=n;
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[2]=t;
   a[0].style[a[1]]=t+'px';
   o.auto?oop.Auto(o.id,o.h):null;
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }

}

/*]]>*/
</script>
</head>

<body>
<input type="button" name="" value="Goto 1" onmouseup="zxcImageCarousel.GoTo('carousel1',1);" />
<input type="button" id="b1" value="Goto 4" />
  <table border="1" cellpadding="0" cellspacing="0" width="815" height="278">
    <tr>
      <td height="200">
 <div id="carousel1" >
  <div class="belt" >
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7482.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (1).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7483.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (2).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7484.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (3).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7485.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (4).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7486.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (5).jpg" border=0></a>
  </div>
 </div>
      </td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF" height="78">
        <p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><span style="background-color: #004699"><font color="#FFFFFF" face="Arial Black" size="3">&nbsp;
        61 PHOTOS OF RICHMOND AND CENTERVILLE INDIANA
        AREA - CLICK ANY PHOTO&nbsp;&nbsp;</font></span></p>
        <p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font color="#004699" face="Arial Black" size="3">Street scenes, antiques stores, and essentially what I saw along the
        way.&nbsp;</font></p>
        <p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font color="#004699" face="Arial Black" size="3">Don't
        miss the green 1960's Ford Fairlane hot rod!</font></td>
    </tr>
  </table>

 <div id="carousel2" onmouseover="zxcImageCarousel.Pause('carousel2');" onmouseout="zxcImageCarousel.Auto('carousel2');" >
  <div class="belt" >
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7492.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (1).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7493.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (2).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7494.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (3).jpg" border=0></a>
  </div>
 </div>

 <div id="carousel3" onmouseover="zxcImageCarousel.Pause('carousel3');" onmouseout="zxcImageCarousel.Auto('carousel3');" >
  <div class="beltV" >
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7492.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (1).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7493.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (2).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7494.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (3).jpg" border=0></a>
  </div>
 </div>


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

zxcImageCarousel.init({
 CarouselID:'carousel1', // the unique ID name of the parent DIV.                               (string)
 Mode:'Horizontal',      //(optional) the display mode, 'Horizontal' or 'Vertical'.             (string, default = 'Horizontal')
 ImagePreload:5,         //(optional) the time allowed to load akk images in seconds.           (number, default = 10)
 StepAnimate:500,        //(optional) the step animation duration in millisec.                  (number, default = 500)
 StepIndex:1,            //(optional) the initial step index.                                   (number, default = 0)
 AutoDirection:1,        //(optional) the initial auto rotation, 1 = anticlock, -1 = clockwise. (number, default = 1 = anticlock)
 AutoHold:1000,          //(optional) the auto rotation 'hold' delay in millisec.               (number, default = StepAnimate*4)
 AutoStart:1000,          //(optional) the auto rotation 'start' delay in millisec.              (number, default = no auto start)
 AddEvents:[             //(optional) the event calls to add to elements to control the script. (array, default = inline event calls)
  // field 0 = the unique ID name of the element.
  // field 1 = the event type.
  // field 2 = the script function name.
  // field 3 = the control parameter to pass to the function.
  ['carousel1','mouseover','Pause'],
  ['carousel1','mouseout','Auto'],
  ['b1','mouseup','GoTo',4]
 ]
});

zxcImageCarousel.init({
 CarouselID:'carousel2',
 AutoStart:1000
});

zxcImageCarousel.init({
 CarouselID:'carousel3',
 Mode:'Vertical',
 AutoStart:200
});

/*]]>*/
</script>


</body>

</html>

[jscheuer1]

See also:

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

[Chipster]

Vic,
Thank you for posting your Image Carousel and formatting my photos into it…I tried it on this test page and I can see the potential…I sure like the way the text box/lower cell of the table fits flush up against the slideshow! Is there a way to make it slowly scroll continually like the conveyor belt script?...It looks like it could be a good tool for me…but for now I was really hoping to just fix the conveyor belt…I may look into your Image Carousel latter. Please forgive me for this but it took a lot of brain power for me to just get the conveyor belt working, I’m very slow at this. Again thank you very much for posting it.
____________________________________________

John,
Thank you for the link to your “Text and Image Crawler” script. It too looks like a good tool…though a steep learning curve…that I may revisit latter…but as mentioned to Vic I’m going to try to stick with the Conveyor Belt for now…Thank you again so much for the link.
______________________________________________

Can anyone advise how I can get rid of the gap between the slideshow and:
ABOVE 34 PHOTOS OF RICHMOND AND CENTERVILLE INDIANA AREA - CLICK ANY PHOTO

Please take a look at the revised slideshow in this link here…I deleted the lower row of the table and put the text outside it…Also got rid of about half the photos…

Q. Perhaps a better comprehensive questions is why is there a gap?....what is it about HTML code that causes a gap between an element or feature (or whatever term I mean)…and text??

Also I tried putting two Conveyor belt slides on the same page and the second wouldn’t manifest…Seems I read somewhere I need some kind of code in the header was it?

[vwphillips]

continious scroll is not reccomended but I have modified my script to provide it as an option

<!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[*/

#carousel1 {
  position:relative;width:815px;height:200px;border:solid red 0px;
}

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

.belt IMG {
  float:left;margin-left:5px; /* do not use margin-right for spacing*/
}

#carousel2 {
  position:relative;width:415px;height:200px;border:solid red 1px;
}

#carousel3 {
  position:relative;width:200px;height:400px;border:solid red 1px;
}

.beltV IMG {
  float:left;margin-top:5px; /* do not use margin-bottom for spacing*/
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
//  Image Step/Continious Carousel. (19-Febuary-2014)
//  by Vic Phillips - http://www.vicsjavascripts.org/


var zxcImageCarousel={

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o){
   this.Pause(id);
   if (n>=0&&n<o.lgth&&n!=o.n){
    o.ud=Math.abs(o.ud)*(n>o.n?1:-1);
    this.step(o,n);
   }
  }
 },

 Auto:function(id,ms){
  var oop=this,o=oop['zxc'+id];
  o?o.to=setTimeout(function(){ oop.step(o,true); },ms||200):null;
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 init:function(o){
  var id=o.CarouselID,m=o.Mode,ld=o.ImagePreload,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,imgs=s?s.getElementsByTagName('IMG'):[];
  if (imgs[1]){
   var ary=[],z0=0;
   o.m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?['top','left','height','offsetTop','offsetHeight']:['left','top','width','offsetLeft','offsetWidth']
   for (;z0<imgs.length;z0++){
    ary[z0]=[imgs[z0],new Image()];
    ary[z0][1].src=imgs[z0].src;
   }
   p.style.overflow='hidden';
   s.style[o.m[2]]='30000px';
   o.id=id;
   o.p=p;
   o.s=s;
   this.load(o,ary,new Date(),(typeof(ld)=='number'&&ld>0?ld:10)*1000);
  }
 },

 load:function(o,ary,d,ms){
  for (var oop=this,z0=0,z1=0;z0<ary.length;z0++){
   if (ary[z0][1].width<40&&new Date()-d<ms){
    return o.to=setTimeout(function(){ oop.load(o,ary,d,ms); },200);
   }
  }
  for (;z1<ary.length;z1++){
   if (ary[z1][1].width<40){
    ary[z1][0].parentNode.removeChild(ary[z1][0]);
    ary.splice(z1--,1);
   }
  }
  ary[1]?oop.ready(o,ary):null;
 },

 ready:function(o,ary){
  var n=o.StepIndex,ud=o.AutoDirection,add=o.AddEvents,ms=o.StepAnimate,h=o.AutoHold,srt=o.AutoStart,c=o.s.cloneNode(true),add=add instanceof Array?add:[],sz,cc,e,t,z0=0,z1=1,z2=0;
  for (;z0<ary.length;z0++){
   ary[z0][1]=ary[z0][0][o.m[3]];
  }
  o.n=ary[n]?n:0;
  sz=ary[z0-1][1]+ary[z0-1][0][o.m[4]];
  o.s.style.position='absolute';
  o.s.style[o.m[2]]=c.style[o.m[2]]=sz+5+'px';
  c.style[o.m[1]]='0px';
  for (;z1<Math.ceil(o.p[o.m[4]]/sz)+1;z1++){
   cc=c.cloneNode(true);
   cc.style[o.m[0]]=sz*z1+'px';
   o.s.appendChild(cc);
  }
  ary[z0]=[null,sz+ary[0][1]];
  o.step=o.Step!==false;
  o.ud=typeof(ud)=='number'&&ud!=0?ud:3;
  o.lgth=z0;
  o.sz=sz;
  o.ms=typeof(ms)=='number'&&ms>100?ms:500;
  o.i=Math.PI/(2*o.ms);
  o.h=typeof(h)=='number'&&h>0?h:o.ms*4;
  o.s=[o.s,o.m[0],-ary[o.n][1]];
  o.s[0].style[o.m[0]]=o.s[2]+'px';
  o.ary=ary;
  for (;z2<add.length;z2++){
   if (add[z2]&&add[z2][0]){
    e=document.getElementById(add[z2][0]);
    t=add[z2][1];
    t=(typeof(t)=='string'?t:'').replace('on','');
    if (e&&t&&this[add[z2][2]]){
    this.addevt(e,t=='click'||t=='mouseover'||t=='mouseout'||t=='mousedown'?t:'mouseup',add[z2][2],o.id,add[z2][3]);
    }
   }
  }
  this['zxc'+o.id]=o;
  typeof(srt)=='number'&&srt>0?this.Auto(o.id,srt):null;
 },

 step:function(o,a){
  this.Pause(o.id);
  o.auto=a===true;
  var n=o.n;
  n=o.auto?n+(o.ud>0?1:-1):a;
  if (o.step&&!o.ary[n]){
   n=o.ud>0?1:o.lgth-1;
   o.s[2]=-o.ary[o.ud>0?0:o.lgth][1];
  }
  if (!o.step&&o.auto){
   o.s[2]-=o.ud;
   o.s[2]<-o.sz?o.s[2]+=o.sz:o.s[2]>0?o.s[2]-=o.sz:null;
   o.s[0].style[o.s[1]]=o.s[2]+'px';
   o.auto?this.Auto(o.id,30):null;
  }
  else {
   this.animate(o,o.s,o.s[2],-o.ary[n][1],new Date(),o.ms);
   o.n=o.step?n:-1;
  }
 },


 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)*Math.sin(o.i*ms)+f;
  if (isFinite(n)){
   a[2]=n;
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[2]=t;
   a[0].style[a[1]]=t+'px';
   o.auto?oop.Auto(o.id,o.h):null;
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }

}

/*]]>*/
</script>
</head>

<body>
<input type="button" name="" value="Goto 1" onmouseup="zxcImageCarousel.GoTo('carousel1',1);" />
<input type="button" id="b1" value="Goto 4" />
  <table border="1" cellpadding="0" cellspacing="0" width="815" height="278">
    <tr>
      <td height="200">
 <div id="carousel1" >
  <div class="belt" >
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7482.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (1).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7483.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (2).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7484.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (3).jpg" border=0></a>
  </div>
 </div>
      </td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF" height="78">
      </td>
    </tr>
  </table>

 <div id="carousel2" onmouseover="zxcImageCarousel.Pause('carousel2');" onmouseout="zxcImageCarousel.Auto('carousel2');" >
  <div class="belt" >
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7492.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (1).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7493.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (2).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7494.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (3).jpg" border=0></a>
  </div>
 </div>

 <div id="carousel3" onmouseover="zxcImageCarousel.Pause('carousel3');" onmouseout="zxcImageCarousel.Auto('carousel3');" >
  <div class="beltV" >
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7492.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (1).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7493.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (2).jpg" border=0></a>
   <a href="http://sportsantiques.com/2013NSCC/IndianaAntiqueAlley/pict7494.jpg" target="_blank"><img src="http://sportsantiques.com/2013NSCC/200t/indiana/IAA (3).jpg" border=0></a>
  </div>
 </div>


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

zxcImageCarousel.init({
 CarouselID:'carousel1', // the unique ID name of the parent DIV.                                (string)
 Mode:'Horizontal',      //(optional) the display mode, 'Horizontal' or 'Vertical'.              (string, default = 'Horizontal')
 Step:false,             //(optional) false = continious scroll, true = step scroll.             (boolean, default = true = step scroll)
 ImagePreload:5,         //(optional) the time allowed to load all images in seconds.            (number, default = 10)
 StepAnimate:500,        //(optional) the step animation duration in millisec.                   (number, default = 500)
 StepIndex:1,            //(optional) the initial step index.                                    (number, default = 0)
 AutoDirection:3,        //(optional) the initial auto rotation, >0 = anticlock, <0 = clockwise. (number, default = 3 = anticlock)
 AutoHold:1000,          //(optional) the auto rotation 'hold' delay in millisec.                (number, default = StepAnimate*4)
 AutoStart:1000,         //(optional) the auto rotation 'start' delay in millisec.               (number, default = no auto start)
 AddEvents:[             //(optional) the event calls to add to elements to control the script.  (array, default = inline event calls)
  // field 0 = the unique ID name of the element.
  // field 1 = the event type.
  // field 2 = the script function name.
  // field 3 = the control parameter to pass to the function.
  ['carousel1','mouseover','Pause'],
  ['carousel1','mouseout','Auto'],
  ['b1','mouseup','GoTo',4]
 ]
});

zxcImageCarousel.init({
 CarouselID:'carousel2',
 AutoStart:1000
});

zxcImageCarousel.init({
 CarouselID:'carousel3',
 Mode:'Vertical',
 Step:false,
 AutoStart:200
});

/*]]>*/
</script>


</body>

</html>

[Chipster]

Thanks Vic for supplying the conveyor version.

Anyone have any input on the gap problem?....and even more important how to put more than one conveyor belt slideshow on a page?
Thanks -Chipster