Conveyor Belt slideshow script (help editing)

**chem3** · 12-27-2005, 01:22 PM

Hello,

I am new at this forum and on my first post here I have some questions about one of DD's scripts (Conveyor Belt slideshow script).
Here's the script:

Code:

<script type="text/javascript">

//Specify the slider's width (in pixels)
var sliderwidth="700px"
//Specify the slider's height
var sliderheight="82px"
//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="http://chem3.jeeran.com/IMG.JPG" border=1></a>'

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

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

.......the rest found Here

</script>

See an example of what I am tring to do here:
Click Here

And my questions are:

1- How can I set the width of the scroller in terms of percentage instead of pixels? I want the width to be 100% and not in pixels.

2- I want to use the scroller to scroll only one image (as you can see on the page above) and I want the gap between the right and left ends of the image to be zero (continuous with no gaps at all). But in the scroller above (see the link above) the first gap between the ends of the image would be 0 (no gap) but the gap would appear between the next ends, then it disappears (no gap) then there's a gap, no gap, gap....
How to make it with no gaps at all?

3- If you use IE, and if you visit the page that includes the script ( Click Here ) your IE browser will tell you that the script was disabled for security reasons and it will not work till you allow it. But if you visit the following page (which includes the same script) it will load normally and IE will not block the script, see the page: Click Here.
How can I make the script load normally in IE without getting it blocked?

Thanks in advance! and sorry for long questions!

**jscheuer1** · 12-27-2005, 09:35 PM

Number 3 first. Not happening here in IE (although there was a pop-up blocking notification) and not happening in a live demo of the below that I set up for a test. Generally, that only happens locally, once the page is live, it will not trigger that security alert. Try this version of the script (I've set the gaps in the configuration - highlighted red, allowing percent width was a major mod - highlight green):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<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 or %)
var sliderwidth="100%"
//Specify the slider's height (in pixels)
var sliderheight="82px"
//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="http://chem3.jeeran.com/IMG.JPG" border=1></a>'

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

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


////NO NEED TO EDIT BELOW THIS LINE////////////
var resizeFlag=sliderwidth.indexOf('%')!==-1? 1 : 0
if (resizeFlag){
var percentWidth=parseInt(sliderwidth, 10)/100
sliderwidth=parseInt(sliderwidth, 10)*5+'px'

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function widenIt(){
var allWide=window.innerWidth? window.innerWidth : iecompattest().clientWidth
var firstContainer=document.getElementById? document.getElementById("firstC") : document.all.firstC
firstContainer.style.width=allWide*percentWidth-20+'px'
}

onresize=widenIt;
}

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){
if (resizeFlag)
widenIt()
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 id="firstC" 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>
</body>
</html>

**chem3** · 12-28-2005, 09:45 AM

Thanks for your help John!

But I have further questions please!

1- I want to use that slider (scroller) more than once (say 4 times) on a web page, but in different places, so each time the script would be the same except the line that locates the image

Code:

leftrightslide[0]='<a href="http://"><img src="http://chem3.jeeran.com/IMG.JPG" border=1></a>'

so, do I have to include the whole same script each time or there is some way to use the same script many times, but each time with a different "image code"? Sorry! I am a beginner!

2- May I delete the last code of the script which includes a link to DD:

Code:

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

But I'll keep the notice:

Code:

/***********************************************
* Conveyor belt slideshow script- &#169; 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
***********************************************/

Thanks!

**jscheuer1** · 12-28-2005, 10:58 AM

Number 2 first this time. Yes, that's fine and dandy with DD as per their 'terms of use'.

Number 1 has no real easy solution. I will look into modding this script for multiple use but, that is quite a bit of work and my skills are not very broad in that area yet. I've done it before but, next time I want to use a new method that I am still learning. It is something I want to learn after seeing DD do it with the Ultimate Fade In Slideshow script. What I really need is a script that it would be worth doing this to that isn't too involved, this script might provide that, we'll see. In the mean time, the easiest way to get multiple copies of this sort of script on a page is to actually use separate pages and have only one copy of the script on your page. The others, as I say, would be on separate pages and show through onto you main or top page via iframes.

**chem3** · 12-28-2005, 02:38 PM

Ok!
I think there is a little problem with the gap code in the altered script above.
When you set the slideshowgap to -4 insted of 0, then instead of having "no gap, gap, no gap,..." between the ends of the image, now there is "4 pixels deducted from right end with no gap, OK with no gap, 4 pixels deducted from right end with no gap, no gap, 4 pixels deducted from right end with no gap, no gap,..." See Here

I want to scroll a complete one image with "no gap, no gap, no gap, no gap,..." ends.
What to do?

**chem3** · 12-29-2005, 08:17 AM

Anyone!

**chem3** · 12-29-2005, 08:58 AM

Another little problem:

How can I make the background color cover all the 100% width? HERE

**jscheuer1** · 12-29-2005, 09:43 AM

Ok, where we have:

Code:

var resizeFlag=sliderwidth.indexOf('%')!==-1? 1 : 0
if (resizeFlag){
var percentWidth=parseInt(sliderwidth, 10)/100
sliderwidth=parseInt(sliderwidth, 10)*5+'px'

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function widenIt(){
var allWide=window.innerWidth? window.innerWidth : iecompattest().clientWidth
var firstContainer=document.getElementById? document.getElementById("firstC") : document.all.firstC
firstContainer.style.width=allWide*percentWidth-20+'px'
}

onresize=widenIt;
}

Change it to:

Code:

var resizeFlag=sliderwidth.indexOf('%')!==-1? 1 : 0
if (resizeFlag){
var percentWidth=parseInt(sliderwidth, 10)/100

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function widenIt(){
var allWide=window.innerWidth? window.innerWidth : iecompattest().clientWidth
var firstContainer=document.getElementById? document.getElementById("firstC") : document.all.firstC
var nextContainer=document.getElementById? document.getElementById("nextC") : document.all.nextC
firstContainer.style.width=allWide*percentWidth-20+'px'
nextContainer.style.width=allWide*percentWidth-20+'px'
}

onresize=widenIt;
}

and where it has:

Code:

write('<div id="firstC" 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">')

Make it:

Code:

write('<div id="firstC" style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div id="nextC" style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')

That will take care of the background issues. Now, about that pesky gap. There were two ways I thought it would look good, depending upon one's opinion. One is where the two images touch each other, the other is where the two images overlap by 1 pixel, making the adjacent border width look the same as the the top and bottom border widths, I like this second option better. Either way, find this line in the code (be careful, there are a few similar looking lines to this one, but only one exactly like it):

Code:

cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

Change it to this:

Code:

cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap-3+"px"

Then set the:

Code:

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

for the 1 pixel overlap, or 0 for the two images to touch each other.

**chem3** · 12-29-2005, 12:56 PM

Now all issues solved.
Many thanks John!

**chem3** · 12-30-2005, 11:41 AM

Now I have an image scroller (slider) that looks fine and scrolls smoothly in IE, but (I hate to say that word) in FireFox browser it scrolls roughly. Is there any way to make it (modify the script to) scroll smoothly in both IE and FF (also in NS and Opera, but I haven't tried it in either of those two) browsers?

Take a look at the final result HERE

Thread: Conveyor Belt slideshow script (help editing)

Thread Tools

Search Thread

Conveyor Belt slideshow script (help editing)

Bookmarks

Bookmarks

Posting Permissions