Conveyor belt slideshow problem

**seekinganswers** · 02-15-2014, 12:19 PM

1) Script Title: multiframe Conveyor belt slide show

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

3) Describe problem:

Hello group. New here, so please be patient.

Found 3 different links to Conveyor belt slideshow on DD. I tried the one in the above URL on DD (dynamicindex14/multiframeslide.htm), but could not get it to work.

Inserted the Style in the Head section, and modified the params in the script as per instructions in the comments, and the slidestoreveal var is 5, one less than the number of slides defined. set slideseparater to "" for a horizontal presentation. None of my images have associated links (yet), so I set optlinktarget to ""

I suspect my problem is in the seqslides array, where I specify the names of my images as well as the URL, because I get 5 broken image symbols.

Seems simple enough. For the URL part I give the full prefix, beyond .com, such as http://www.abc.com/lib/images. Tried both ending this with and without a forward slash, neither worked. For my 6 images, just their actual filename, such as seqslides[0]="image1.jpg"

Can anyone help with this basic level problem?

Thanks for looking in.

seekinganswers in Switzerland

**vwphillips** · 02-15-2014, 05:45 PM

Please post a link to your page
as it works for me

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

/*set CSS for SPAN tag surrounding each image*/
.seqslidestyle{
margin-right: 15px;
}
</style></head>

<body>
<script type="text/javascript">

/***********************************************
* MultiFrame Image 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
***********************************************/

var seqslides=new Array()
//Set Path to Image plus optional URL ("" for no URL):
seqslides[0]=["http://www.vicsjavascripts.org/StdImages/1.gif"]
seqslides[1]=["http://www.vicsjavascripts.org/StdImages/2.gif", "http://www.javascriptkit.com"]
seqslides[2]=["http://www.vicsjavascripts.org/StdImages/3.gif", "http://www.google.com"]
seqslides[3]=["http://www.vicsjavascripts.org/StdImages/4.gif", "http://www.yahoo.com"]
seqslides[4]=["http://www.vicsjavascripts.org/StdImages/5.gif", "http://www.google.com"]

//Set pause between each image display (2000=2 second):
var slidedelay=2000

//Set how many images to show at once (must be less than total # of images above):
var slidestoreveal=3

//Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
//"" for none (or horizontal):
var slideseparater="<br>"

//Set optional link target to be added to all images with a link:
var optlinktarget="secwindow"

//Set image border width:
var imgborderwidth=0

//Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
//Change 0.2 to 0 to completely hide image when it's dimmed:
var opacityvalues=[0.2,1]

///No need to edit beyond here///////////

function processimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

var curslide=1 //var to track current slide (total: slidestoreveal)
var curimgindex=0 //var to track current image (total: seqslides.length)
var isfirstcycle=1 //boolean to indicate whether this is the first cycle

if (document.getElementById){
for (i=0;i<slidestoreveal;i++)
document.write('<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater)
curimgindex=slidestoreveal
illuminateslide(0,opacityvalues[1])
}

function illuminateslide(slideindex, amt){
var slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0]
if (slideobj.filters)
slideobj.filters.alpha.opacity=amt*100
else if (slideobj.style.MozOpacity)
slideobj.style.MozOpacity=amt
}

function displayit(){
if (curslide<slidestoreveal){
if (!isfirstcycle)
changeimage(curslide)
illuminateslide(curslide, opacityvalues[1])
curslide++
}
else{
isfirstcycle=0
for (i=0;i<slidestoreveal;i++)
illuminateslide(i, opacityvalues[0])
changeimage(0)
illuminateslide(0, opacityvalues[1])
curslide=1
}
}

function changeimage(slideindex){
document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex])
curimgindex++
if (curimgindex>=seqslides.length)
curimgindex=0
}

if (document.getElementById)
setInterval("displayit()",slidedelay)


</script>

<p style="font: normal 12px Arial">This free script provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></p>
</body>

</html>

**seekinganswers** · 02-15-2014, 06:24 PM

Hello Vic,

Thanks for your time.
I changed the seqslides to single full URL as you have it in your code sample for [0]. This worked!

Not sure why the two part specification as given by DD ("image name" , "URL prefix") did not work for me, but the problem is solved, thanks to you.

Chuck