Urgent Question From Clueless Rookie

[sleepingcobra]

Script Title: Conveyor Belt Slideshow Script

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

Describe Problem:

This is isn't so much a problem as it is just a few "How To" questions. First off, this is a lovely script. Second, I'm going to use it to help some MOMA folks project a photographer's images onto a wall at an art show 24/7 in upstate New York. If anyone is reading this and knows the answers to my questions, I would be humbled and thankful. So, without further ado:

1)Some of the images in his photo slideshow are 600x400, others are 400x600. This script bottom-justifies all of the images' alignment. Is there a little string of code I can plug in to make the images align on a centered, horizontal line?

2) In the code, it asks:

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

Whatever I put inside, outside or without those quotes shows up as text IN the slideshow itself. Therefore, I realized, I'm not sure how to specify a gap "using HTML." How do I specify a gap without having the text show up in the slide show?

3) If there's a way to remove or hide the scroll bar that invariably shows up at the bottom of the conveyor belt (this slide show is over 800 images long) I'd love to hear it, though I can live with it if need be.

Thanks so much for reading this, and thanks in advance for having patience with this clueless coding rookie!

sleepingcobra

[rangana]

Hi sleepingcobra,
Since this is urgent, I have edited the codes for you,..see if it fits your requirement:

<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="300px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='&nbsp;&nbsp;<a href="http://"><img src="Your image" border=1></a>&nbsp;&nbsp;'
leftrightslide[1]='&nbsp;&nbsp;<a href="http://"><img src="YOur image" border=1></a>&nbsp;&nbsp;'
leftrightslide[2]='&nbsp;&nbsp;<a href="http://"><img src="YOur image" border=1></a>&nbsp;&nbsp;'
leftrightslide[3]='&nbsp;&nbsp;<a href="http://"><img src="YOur image" border=1></a>&nbsp;&nbsp;'
leftrightslide[4]='&nbsp;&nbsp;<a href="http://"><img src="YOur image" border=1></a>&nbsp;&nbsp;'

//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="5px" cellpadding="5px" align="center"><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:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></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>

I don't understand your third question

Having spaces between the picture cause me to pull my hair,, as a result I just used the   character

[sleepingcobra]

So, I tried what you posted and the slideshow didn't change in terms of its alignment. Though the   character works like a charm! Thanks!

Here's what I'm working on:

http://www.billdane.com/gacslideshow.html

Give it a second to load (it's 120 400x600 images, and will be around 800 images when I'm done) and keep your mouse out of the middle of the screen because of the mouseover pause effect.

Using this as the example, how would one center the 600x400 photos on a horizontal line with the 400x600 photos?

and

How would one remove the scroll bar at the bottom?

If anyone looks at my code, please take it easy on me - I know it's a horrible mess and I know no one should EVER use Yahoo! Sitebuilder - but it's all I have right now...

Thanks so very much.

sleepingcobra

[jscheuer1]

Instead of peppering your code with:

 

characters, you should be able to use a few or more of them here:

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

and be done with it.

To center the images vertically, add this style to your stylesheet:

#test2 img, #test3 img {
vertical-align:middle;
}

[rangana]

Ok...got it fix!..here's the code:

<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="650px"
//Specify the slider's height
var sliderheight="650px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=10
//configure background color:
slidebgcolor="#F5F5E9"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<span style="height:500px;width:400px;"><img src="http://www.billdane.com/images/gacslideshow/v2/1.jpg"></span>'
leftrightslide[1]='<img src="http://www.billdane.com/images/gacslideshow/v2/2.jpg">'
leftrightslide[2]='<img src="http://www.billdane.com/images/gacslideshow/v2/3.jpg">'



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

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


////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="5px" cellpadding="5px" align="center"><td align="center">')
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:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></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>

...and change this part in your page.

<div id="e1" style="position:absolute;left:0;top:15;width:810px;height:48px;">
          <table border="0" cellspacing="0" cellpadding="0" width="810px">

See if it helps

[sleepingcobra]

Instead of peppering your code with:

 

characters, you should be able to use a few or more of them here:

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

and be done with it.

To center the images vertically, add this style to your stylesheet:

#test2 img, #test3 img {
vertical-align:middle;
}

All of this is super helpful, but I can't actually implement any of the changes effectively because (1) I'm using Yahoo! SiteBuilder and (2) I'm not super clear about what I'm even really doing. That is - I'm not using CSS, but am using this crappy, unalterable interface that Yahoo! provides. I can't alter the root code of my pages unless I interrupt it all by FTPing from Dreamweaver, and, frankly, I'm still learning how to do that successfully. What I can, do, however, is input little strings of code into the Dynamic Drive Image Conveyor code itself, which I have stuck into the body of a page through Sitebuilder.

What I'm saying, actually, is that I need someone to hold my hand and show where to put this code INSIDE of the Dynamic Drive code - how to open and close the tags, where to put them, etc. That is, if it's not just a royal pain for someone to show me that.

Specifically, where do I put this

#test2 img, #test3 img {
vertical-align:middle;
}

and the code you had up about hiding the scroll bar (I think you might have edited it out).

1,000,000,000,000,000,000 thanks.

[sleepingcobra]

Ok...got it fix!..here's the code:

<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="650px"
//Specify the slider's height
var sliderheight="650px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=10
//configure background color:
slidebgcolor="#F5F5E9"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<span style="height:500px;width:400px;"><img src="http://www.billdane.com/images/gacslideshow/v2/1.jpg"></span>'
leftrightslide[1]='<img src="http://www.billdane.com/images/gacslideshow/v2/2.jpg">'
leftrightslide[2]='<img src="http://www.billdane.com/images/gacslideshow/v2/3.jpg">'



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

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


////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="5px" cellpadding="5px" align="center"><td align="center">')
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:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></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>

...and change this part in your page.

<div id="e1" style="position:absolute;left:0;top:15;width:810px;height:48px;">
          <table border="0" cellspacing="0" cellpadding="0" width="810px">

See if it helps

Argh! This seems like it should work - but when I input it exactly how you have it - nothing is changing. I know it's probably all my fault - but I'd also like to blame yahoo! sitebuilder.

See my post above for more details.

And, by the way, the help you've been providing is incredibly generous.

Long Live Dynamic Drive!

[rangana]

What??...it did not work??..but it should!.I tested it on IE and FF, anyway, let's try John's code:
have this code in the <head> section:

<style type="text/css">
#test2 img, #test3 img {
vertical-align:middle;
}
</style>

See if it helps:

[jscheuer1]

Ah, the scroll bar is caused by the overflow of the temp span in the script:

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')

change it to:

document.write('<div style="overflow:hidden;width:100px;visibility:hidden;position:absolute;top:-100px;left:-9000px;"><span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span></div>')

You can also make a gap between images this way:

//Specify gap between each image (use HTML):
var imagegap='<img style="visibility:hidden;width:280px!important;" src="spacer.gif">'

[sleepingcobra]

What??...it did not work??..but it should!.I tested it on IE and FF, anyway, let's try John's code:
have this code in the <head> section:

<style type="text/css">
#test2 img, #test3 img {
vertical-align:middle;
}
</style>

See if it helps:

YES!!!!!!!!!!!!!!!!!!! In the HEAD!!!!!!!!!!!!!!!!!!!!!!! Sweet. It totally works.