PDA

View Full Version : Urgent Question From Clueless Rookie



sleepingcobra
02-15-2008, 02:15 AM
Script Title: Conveyor Belt Slideshow Script

Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/leftrightslide.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
02-15-2008, 02:57 AM
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 :D

Having spaces between the picture cause me to pull my hair,, as a result I just used the &nbsp; character :D

sleepingcobra
02-15-2008, 04:31 AM
So, I tried what you posted and the slideshow didn't change in terms of its alignment. Though the &nbsp; 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
02-15-2008, 05:24 AM
Instead of peppering your code with:

&nbsp;

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


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

and be done with it.

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


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

rangana
02-15-2008, 05:28 AM
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 :D

sleepingcobra
02-15-2008, 06:24 AM
Instead of peppering your code with:

&nbsp;

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


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

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
02-15-2008, 06:28 AM
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 :D

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
02-15-2008, 06:31 AM
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
02-15-2008, 06:32 AM
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
02-15-2008, 06:45 AM
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.

rangana
02-15-2008, 06:49 AM
There it goes!...You're welcome!..glad we could help:D

sleepingcobra
02-15-2008, 07:09 AM
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">'


WOOO!!! Scroll Bar is GONE! I LOVE IT! Thank you so much!

Side note: that neat little bit of code you gave me to space out the images breaks the slideshow. It is either my fault for entering it wrong - or it's yahoo!'s fault for having such a crappy web builder. I'll just stick with the &nbsp;s for now - if it works - it works - that's the headspace I'm in right now.

Truth be told - I hate long strings of cruddy looking code, too. in fact, I hate messy ANYTHING - I spent like 300 hours making my fricken Vista gadget sidebar look JUST right. JUST the right amount of gadgets, JUST the right finctions, JUST the right opacity, JUST the right order, etc. etc. I think I have serious obsessive compulsive disorder. but - I have to get this f'ing slidehow up by 8 am east coast time so they can start testing it - so I have to sacrafice neatness for functionality.

By the way - if you've got a sec - what's the difference between "span id" and a "div style".

Actually - what's a "span" in the first place?

Thank you SO MUCH again. Now all I have to do is find a fast way to write in the IMG SRCs for 800 images! Maybe I can cook something up in excel. hehe.

sleepingcobra

jscheuer1
02-15-2008, 07:35 AM
- so I have to sacrafice neatness for functionality.

By the way - if you've got a sec - what's the difference between "span id" and a "div style".

Actually - what's a "span" in the first place?

Thank you SO MUCH again. Now all I have to do is find a fast way to write in the IMG SRCs for 800 images! Maybe I can cook something up in excel. hehe.

I understand neatness vs. function. Using the image tag to create the gap would work best using a 1 or 2 pixel gif, but worked fine in testing here using no image and visibility:hidden. The &nbsp; characters can render differently depending upon a browser's text size setting, though.

Now, about the span and the div. I didn't remove the span, I just enclosed it in a division that had its overflow hidden. The span must still be allowed to render invisibly with no restrictions upon its overflow because that is how the script measures the length of the image train.

A division is a block level element, so can have its width and overflow set reliably across browsers. A span is an inline element so has only the width of the content that fills it in many browsers. Style is a system for refining how an element is rendered. An id is a unique identifier for an element so that the browser may find it for a variety of purposes without confusing it with any other element on the page.

jscheuer1
02-15-2008, 09:36 AM
The way you have your images numbered, you can add whole folders with javascript, for example:


. . . lide[126]='<img src="http://www.billdane.com/images/gacslideshow/v2/127.jpg">'
leftrightslide[127]='<img src="http://www.billdane.com/images/gacslideshow/v2/128.jpg">'
leftrightslide[128]='<img src="http://www.billdane.com/images/gacslideshow/v2/129.jpg">'
leftrightslide[129]='<img src="http://www.billdane.com/images/gacslideshow/v2/130.jpg">'
leftrightslide[130]='<img src="http://www.billdane.com/images/gacslideshow/v2/131.jpg">'
leftrightslide[131]='<img src="http://www.billdane.com/images/gacslideshow/v2/132.jpg">'

for(var i=1;i<129;++i)
leftrightslide.push('<img src="http://www.billdane.com/images/gacslideshow/v3/'+i+'.jpg">')


The highlighted section will add 1.jpg thru 128.jpg from the v3 folder.