How do I make photo pixel height 180 in Conveyor Belt slide show?, et al

[Chipster]

RE: How do I make photo pixel height 180 in Conveyor Belt slide show?, et al

This Conveyor Belt slide show script below looks very promising. I have spent hours researching how to set up a slide show like it. I have some questions though on certain points, please see below:

Please note I use Frontpage 2000 as my editor.

1. How can I configure background color so that it does not have one? That is, I want to use the color of the table I will place it in as the backgrond color.

2. Regarding How to "Specify the slider's images".

Is there code I can add that would make each photo in the slide show 180 pixels tall? I specified the slide show that tall but I can only see the tops of the photos.

And also, I would be loading tons of photos to display in the slide show....maybe like 500 plus....When I make them 180 pixels tall, will that decrease the load time for all those photos? I'm concerned each photo will slow the page load since most all are 1200x1600 size photos

leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'

______________________________________________________________

<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]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></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: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>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

[jscheuer1]

You should probably upgrade to:

http://home.comcast.net/~jscheuer1/side/thecrawl/

It allows you to specify background, but if you do not, whatever is behind it will show through.

The images are specified as ordinary HTML in a division on your page, so you may set each image's height attribute or style height. But the best way to get uniform image height in scripts like these is to edit your images in an image editing program, resizing them to the desired dimensions.

[Chipster]

Thanks John, I looked at that page and it all looks good, but seems much more complicated than the Conveyor belt one....Where do you place the code for the image? The conveyor belt one has a place for it already.

What are the benifits of the crawler.js over the conveyor belt? Is the crawler.js easy to use...I'm new at html code...I basicaly know how to copy and paste....I'm sure you figured that out by now...
Thank you again for your help
-Chip
______________________________________

<div class="marquee" id="marquee0">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'marquee0',
style: { //style object for this marquee container (use quotes on both sides of the : as shown)
'width': '100%',
'height': '1.6em',
'color': '#fff',
'background-color': '#32f',
'font-family': 'sans-serif',
'margin': '0 auto'},
inc: 8, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>

[jscheuer1]

It's a little more complicated because there are more options, but mostly just different. Look at an example using images:

<div class="marquee" id="vacation">
<img src="../vfs/images/image_01_tbn.jpg" alt="">
<img src="../vfs/images/image_02_tbn.jpg" alt="">
<img src="../vfs/images/image_03_tbn.jpg" alt="">
<img src="../vfs/images/image_04_tbn.jpg" alt="">
<img src="../vfs/images/image_05_tbn.jpg" alt="">
<img src="../vfs/images/image_06_tbn.jpg" alt="">
<img src="../vfs/images/image_07_tbn.jpg" alt="">
<img src="../vfs/images/image_08_tbn.jpg" alt="">
<img src="../vfs/images/image_09_tbn.jpg" alt="">
<img src="../vfs/images/image_10_tbn.jpg" alt="">
</div>
<script type="text/javascript">
marqueeInit({
 uniqueid: 'vacation',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
	'width': '100%',
	'height': '66px',
	'background-color': '#ddd',
	'border': '1px solid #111',
	'margin': '0 auto'},
 inc: 3 //speed - pixel increment for each iteration of this marquee's movement
});
</script>

The advantages are the added options, the fact that it is standards compliant, has good non-javascript fall back, can be used more than once on a page, and 'plays well' with other scripts.