conveyor belt slide show code conflict

**Sandi B** · 02-21-2009, 07:04 PM

1) Script Title: Conveyor belt slideshow

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

3) Describe problem:
I have done many searches and read the tutorial recommended and partially corrected the problem but still cannot get the slide show to work like it did before I added the drop down menu. I will need to add more drop downs as the site progresses but want to keep the slide show at the bottom of the page. Following is the code from my page. Thanks so much in advance to anyone that can help me out.
I did not copy below the "no need to edit" line because I did not edit it.
If the cropped code doesn't make sense I apologize.

<body onload="MM_preloadImages('images/buttons/homebutton2.jpg','images/buttons/talentsho2.jpg','images/buttons/classiccars2.jpg','images/buttons/kidsactivities2.jpg','images/buttons/4hexhibits2.jpg','images/buttons/vendorinfo2.jpg','images/buttons/fairboard2.jpg','images/buttons/photogallery2.jpg','images/buttons/orhorseshow2.jpg','images/buttons/ordemo2.jpg','images/buttons/ormotocross2.jpg','images/buttons/ortrpull2.jpg','images/buttons/fairschedule2.jpg','images/buttons/pedalpull2.jpg','images/buttons/orentertain2.jpg','images/buttons/orcontact2.jpg','images/buttons/paraderte2.jpg','images/buttons/prembk2.jpg');fillup()">
<table width="822" height="798" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor=>
<td height="19" bgcolor="#FFFFE8"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/buttons/homebutton2.jpg',1)"><img src="images/buttons/homebutton1.jpg" name="Image5" width="203" height="37" border="0" id="Image5" /></a></td>
<th height="234" colspan="5" rowspan="8" align="left"><img src="images/buttons/header1.png" width="620" height="297" /></th>
</tr>
<tr bgcolor="#FFFFE8">
<td height="19"><a href="talentshow.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/buttons/talentsho2.jpg',1)"><img src="images/buttons/talentsho1.jpg" name="Image11" width="203" height="37" border="0" id="Image11" /></a></td>
</tr>
<tr bgcolor="#FFFFE8">
<td height="19"><a href="classiccars.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/buttons/classiccars2.jpg',1)"><img src="images/buttons/classiccars1.jpg" name="Image12" width="203" height="37" border="0" id="Image12" /></a></td>
</tr>

skip a bunch of button code


<tr>
<td colspan="1" rowspan="2" align="left" valign="top" bordercolor="#848566" class="style4"><div align="left"><img src="images/sign.jpg" width="300" height="288" />
</div> </td>
<td align="center" valign="top" bordercolor="#848566" class="style4"><img src="images/frontpagesign.jpg" width="300" height="144" /></td>
</tr>
<tr>
<td align="center" valign="top" bordercolor="#848566" class="style4"><img src="images/frontpagesign3.jpg" width="300" height="144" /></td>
</tr>

<tr>
<td colspan="5" align="left" bordercolor="#848566" class="style4"><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="605px"
//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="images/slideshowbelt/carousel.jpg" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="images/slideshowbelt/demo.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="images/slideshowbelt/fairgrounds.jpg" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="images/slideshowbelt/moto.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="images/slideshowbelt/tractor.jpg" border=1></a>'
leftrightslide[5]='<a href="http://"><img src="images/slideshowbelt/horse.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////////////

**Sandi B** · 02-21-2009, 08:01 PM

And I didn't explain my problem! The slide show works but only displays the first picture and does not display all the way to the right. I am not java script literate and even after studying the script I can't figure out where it is likely the problem is. So Sorry and Thanks

**jscheuer1** · 02-21-2009, 08:50 PM

In the styles for your page you probably have images set to display: block; which will cause the content of the conveyor to wrap, which means that all the other images are there, just below where you can see them.

But it could be something else. Add this to your stylesheet:

Code:

#temp img, #test2 img, #test3 img {
 display: inline!important;
}

If that takes care of it, Great! If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**Sandi B** · 02-21-2009, 08:55 PM

Thanks for the quick reply. If that doesn't work I will upload the page to a folder in my own site for you to look at. Unfortunately that is for tomorrow. Thanks again. Sandi B

**Sandi B** · 02-21-2009, 11:33 PM

I tried your fix (don't even know if I got it right) and it didn't do the job. Here is a temporary link to the page.

http://www.goldenrodonline.com/webs/chisagocountyfair/

I can't even begin to tell you how I envy and admire you folks that write this code and help all of us that want/need to use it. Thanks!

**jscheuer1** · 02-22-2009, 01:51 AM

I'm not sure what you did, but the style I recommended is not on or associated with your demo. Add it here (from your demo's source, addition highlighted):

Code:

<style type="text/css">
<!--
@import url("images/buttons/prembk1.css");

@import url("images/buttons/prembk1.css");

@import url("images/buttons/prembk1.css");

@import url("images/buttons/prembk1.css");

@import url("images/buttons/prembk1.css");

body {
	background-image: url(images/buttons/fireworks_dual3.jpg);
}
.style4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
}
.style5 {color: #CC3300}
	
#temp img, #test2 img, #test3 img {
 display: inline!important;
}
-->
</style>

Be sure to clear the cache and reload the page after making changes like this.