Conveyor Belt Slideshow - how to adjust height and width of photos, et al

[Chipster]

Conveyor Belt slideshow script

http://www.dynamicdrive.com/dynamici...rightslide.htm

Hi,
I have some questions about the Conveyor Belt Slideshow

1. How can I adjust the dimensions (height and width) of the photos in the Conveyor Belt slideshow seen in the link above?

2. How can I adjust the space above and below the slideshow?

Thanks so much.
-Chipster

[Beverleyh]

For your first question you'd adjust the variables indicated in the script until they accommodate the height and width of your images;

//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="150px"

To adjust the space below, just increase the sliderheight variable mentioned above.

To increase the space above, look for this line in the code and change the values indicated;

write('<div id="test2" style="position:absolute;left:0px;top:10px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:10px"></div>')

And to adjust the space between, you use HTML in the imagegap variable;

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

You could increase the gap with a non-breaking space characters   or you could add a span with a specific width;

//Specify gap between each image (use HTML):
var imagegap="<span style='display:inline-block;width:10px'></span>"

If you need more help, please provide a link to your page.

[Chipster]

Hi Beverley, thank you for helping me.

I did adjust the width and height to 815 wide and 200 tall...but just the top of the photos appear...how can I reduce the size of the photos down to 200 pxl tall?..here is a link to the page the slideshow is on...please scroll about 1/4 down the page to see the slideshow...right above the green tables....I know the page is messy, it's like a junk room...not meant for public consumption...I use it to test things out

Oh and how do I get rid of that blue border around the photos?

I'll get to the space gap question after I get this down....I have to take this slow. Thanks again
Kindly
-Chipster

[Beverleyh]

Your images are 1200 x 900 so you're loading a lot (a LOT) of excess weight - resize the images to the size you need them, for the script and for the sake of your visitors. There are many free image editing/manipulation software so try something like Shrink O Matic to get them to the size you want: http://toki-woki.net/p/Shrink-O-Matic/

The blue border (which I cant see in IE11 where I currently am) is presumably from the linked images. There's way too much code for me to comfortably look at - 5500+ lines - but from the script page you can edit the borders in the image array;

leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=0></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=0></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=0></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=0></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=0></a>'

For your page though, I really recommend you split it down in to a few sub-sections. That one page took about 12 seconds to load for me, makes 300 HTTP requests (in other words its loading 300 components such as images, scripts and stylesheets) and it weighs a massive 2MBs in size.

Ideally you should be aiming for as quick a load-time as possible - 3 to 4 seconds is generally all it takes before visitors lose interest. And if you could keep the weight under 1MB (even better, under 500kb) you'll really help folks out who have slow connections and less powerful devices.

[Chipster]

I just realized only one photo is scrolling over and over...but I have five photos loaded in the script...please take a look at my code below and tell me what I'm doing wrong...that is, why just one photo is manifesting..I'll get to the other questions on size and all once I solve this
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="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/2011National/2011Nat_Photos75/Tuesday75/PICT2041_1200x900.jpg" border=1></a>'
leftrightslide[1]='<a href="http://sportsantiques.com/2011National/2011Nat_Photos75/Tuesday75/PICT2043_1200x900.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="http://sportsantiques.com/2011National/2011Nat_Photos75/Tuesday75/PICT2044_1200x900.jpg" border=1></a>'
leftrightslide[3]='<a href="http://sportsantiques.com/2011National/2011Nat_Photos75/Tuesday75/PICT2045_900x1200.jpg" border=1></a>'
leftrightslide[4]='<a href="http://sportsantiques.com/2011National/2011Nat_Photos75/Tuesday75/PICT2047_1200x900.jpg" 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></td>

[Beverleyh]

Its because your image array is badly formatted;

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://sportsantiques.com/2011National/2011Nat_Photos75/Tuesday75/PICT2041_1200x900.jpg" border=1></a>'
leftrightslide[1]='<a href="http://sportsantiques.com/2011National/2011Nat_Photos75/Tuesday75/PICT2043_1200x900.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="http://sportsantiques.com/2011National/2011Nat_Photos75/Tuesday75/PICT2044_1200x900.jpg" border=1></a>'
leftrightslide[3]='<a href="http://sportsantiques.com/2011National/2011Nat_Photos75/Tuesday75/PICT2045_900x1200.jpg" border=1></a>'
leftrightslide[4]='<a href="http://sportsantiques.com/2011National/2011Nat_Photos75/Tuesday75/PICT2047_1200x900.jpg" border=1></a>'

Only the one highlighted is correct. What you've done with the others is remove the img tag and put your image as the hyperlink (in the link href instread of as the img src)

[Chipster]

Hi Beverley,
Thanks very much...got it all straightened out....got the photos reduced....adjusted the space before and after....got rid of the blue border...Once I get this down I'll know how to make these slideshows for my stories...

All is good except one thing...when I click on any of the photos in the slideshow it takes me to a blank page...How can I hyperlink each photo to the full sized version of the same photo?....and preferably have it open in a new window so the viewer doesn't leave the page....see the slideshow here...scroll about 1/4 down the page to see it. Again it's a test out page I use...ignore all the clutter...Below is the code for the photos...and below that rare the URL's of the corresponding photos I would like to link the slideshow photos to...in respective order of the code

Thanks so much again!
Kindly -Chipster

leftrightslide[0]='<a href="http://"><img src="http://sportsantiques.com/MellonBall.jpg" border=0></a>'
leftrightslide[1]='<a href="http://"><img src="http://sportsantiques.com/HandsomeDanFelt.jpg" border=0></a>'
leftrightslide[2]='<a href="http://"><img src="http://sportsantiques.com/D&MBBCleats.jpg" border=0></a>'
leftrightslide[3]='<a href="http://"><img src="http://sportsantiques.com/FBHlmetWhite.jpg" border=0></a>'
leftrightslide[4]='<a href="http://"><img src="http://sportsantiques.com/FB_BronzeCH.jpg" border=0></a>'
leftrightslide[5]='<a href="http://"><img src="http://sportsantiques.com/GolfClckNrthBrit.jpg" border=0></a>'
leftrightslide[6]='<a href="http://"><img src="http://sportsantiques.com/GolfingPitcher.jpg" border=0></a>'
leftrightslide[7]='<a href="http://"><img src="http://sportsantiques.com/LincolnBatter.jpg" border=0></a>'
leftrightslide[8]='<a href="http://"><img src="http://sportsantiques.com/HarvPEA_Poswter.jpg" border=0></a>'
leftrightslide[9]='<a href="http://"><img src="http://sportsantiques.com/cyyoung.jpg" border=0></a>'

BELOW, URL'S OF CORRESPONDING FULL SIZED PHOTOS TO CODE ABOVE, IN RESPECTIVE ORDER

http://sportsantiques.com/SlideGallery/fb_melon.jpg
http://sportsantiques.com/SlideGallery/HanDan18x9.jpg
http://sportsantiques.com/SlideGallery/D&MBBCleats.jpg
http://sportsantiques.com/SlideGallery/FBHlmet-DE.jpg
http://sportsantiques.com/SlideGallery/FB_Bronze.jpg
http://sportsantiques.com/SlideGallery/GolfClckNrthBrit.jpg
http://sportsantiques.com/SlideGallery/tallgolf.jpg
http://sportsantiques.com/SlideGallery/bbbatter.jpg
http://sportsantiques.com/SlideGallery/peaharv.jpg
http://sportsantiques.com/SlideGallery/cyyoung.jpg

[jscheuer1]

Like so:

leftrightslide[0]='<a href="http://sportsantiques.com/SlideGallery/fb_melon.jpg"><img src="http://sportsantiques.com/MellonBall.jpg" border=0></a>'
leftrightslide[1]='<a href="http://sportsantiques.com/SlideGallery/HanDan18x9.jpg"><img src="http://sportsantiques.com/HandsomeDanFelt.jpg" border=0></a>'
leftrightslide[2]='<a href="http://sportsantiques.com/SlideGallery/D&MBBCleats.jpg"><img src="http://sportsantiques.com/D&MBBCleats.jpg" border=0></a>'
leftrightslide[3]='<a href="http://sportsantiques.com/SlideGallery/FBHlmet-DE.jpg"><img src="http://sportsantiques.com/FBHlmetWhite.jpg" border=0></a>'
leftrightslide[4]='<a href="http://sportsantiques.com/SlideGallery/FB_Bronze.jpg"><img src="http://sportsantiques.com/FB_BronzeCH.jpg" border=0></a>'
leftrightslide[5]='<a href="http://sportsantiques.com/SlideGallery/GolfClckNrthBrit.jpg"><img src="http://sportsantiques.com/GolfClckNrthBrit.jpg" border=0></a>'
leftrightslide[6]='<a href="http://sportsantiques.com/SlideGallery/tallgolf.jpg"><img src="http://sportsantiques.com/GolfingPitcher.jpg" border=0></a>'
leftrightslide[7]='<a href="http://sportsantiques.com/SlideGallery/bbbatter.jpg"><img src="http://sportsantiques.com/LincolnBatter.jpg" border=0></a>'
leftrightslide[8]='<a href="http://sportsantiques.com/SlideGallery/peaharv.jpg"><img src="http://sportsantiques.com/HarvPEA_Poswter.jpg" border=0></a>'
leftrightslide[9]='<a href="http://sportsantiques.com/SlideGallery/cyyoung.jpg"><img src="http://sportsantiques.com/cyyoung.jpg" border=0></a>

[Beverleyh]

Thanks for preparing the array John.

See how this is just standard HTML inside the array? The img tag wrapped in an anchor (a) tag - with the anchor tag linking to your larger image in the href?

leftrightslide[0]='<a href="http://sportsantiques.com/SlideGallery/fb_melon.jpg"><img src="http://sportsantiques.com/MellonBall.jpg" border=0></a>'

And to open your larger linked images in a new window, you use the target attribute in the opening a tag;

leftrightslide[0]='<a href="http://sportsantiques.com/SlideGallery/fb_melon.jpg" target="_blank"><img src="http://sportsantiques.com/MellonBall.jpg" border=0></a>'

More info on the target attribute: http://www.w3schools.com/tags/att_a_target.asp

[Chipster]

Thank you Beverly and John....I tried numerous times but the slideshow won't manifest...Below is an excerpt of the code....Can you please take a look and tell me what I'm doing wrong? thanks

My editor is Frontpage 2000. When I switch to "preview" I get the flag below:


On http://sportsantiques.com/antiqueoftheweekwaiting.htm I inserted the slideshow...but you won't see it since it doesn't manifest, however click the photo below to see where it's suppose to show up


-Chipster

                   <font></p>

  <div align="center">
    <center>
    <table border="0" cellpadding="0" cellspacing="0" width="815">
      <tr>
        <td>
          <p align="center"><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="219px"
//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/SlideGallery/fb_melon.jpg"><img src="http://sportsantiques.com/MellonBall.jpg" border=0></a>'

leftrightslide[1]='<a href="http://sportsantiques.com/SlideGallery/HanDan18x9.jpg"><img src="http://sportsantiques.com/HandsomeDanFelt.jpg" border=0></a>'

leftrightslide[2]='<a href="http://sportsantiques.com/SlideGallery/D&MBBCleats.jpg"><img src="http://sportsantiques.com/D&MBBCleats.jpg" border=0></a>'

leftrightslide[3]='<a href="http://sportsantiques.com/SlideGallery/FBHlmet-DE.jpg"><img src="http://sportsantiques.com/FBHlmetWhite.jpg" border=0></a>'

leftrightslide[4]='<a href="http://sportsantiques.com/SlideGallery/FB_Bronze.jpg"><img src="http://sportsantiques.com/FB_BronzeCH.jpg" border=0></a>'

leftrightslide[5]='<a href="http://sportsantiques.com/SlideGallery/GolfClckNrthBrit.jpg"><img src="http://sportsantiques.com/GolfClckNrthBrit.jpg" border=0></a>'

leftrightslide[6]='<a href="http://sportsantiques.com/SlideGallery/tallgolf.jpg"><img src="http://sportsantiques.com/GolfingPitcher.jpg" border=0></a>'

leftrightslide[7]='<a href="http://sportsantiques.com/SlideGallery/bbbatter.jpg"><img src="http://sportsantiques.com/LincolnBatter.jpg" border=0></a>'

leftrightslide[8]='<a href="http://sportsantiques.com/SlideGallery/peaharv.jpg"><img src="http://sportsantiques.com/HarvPEA_Poswter.jpg" border=0></a>'

leftrightslide[9]='<a href="http://sportsantiques.com/SlideGallery/cyyoung.jpg"><img src="http://sportsantiques.com/cyyoung.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:11px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:11px"></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>

          
      </tr>
    </table>
    </center>
  </div>

<p align="left" style="margin-top: 0; margin-bottom: 0"><font face="Arial" size="5" color="#FFFFFF">