Menu
Hi,
i’m hoping someone will be able to help me out with a problem i am having. I am trying to create an multiframe image slideshow that displays 3 horizontal images, which are hyperlinked. here is the code below:
[I]<script type=”text/javascript”>
//<![CDATA[
/***********************************************
[url]www.dynamicdrive.com
* This notice MUST stay intact for legal use
[url]http://www.dynamicdrive.com/
*/
var seqslides=new Array()
//Set Path to Image plus optional URL (“” for no URL):
seqslides[0]=[“
seqslides[1]=[“
seqslides[2]=[“
seqslides[3]=[“
seqslides[4]=[“
seqslides[5]=[“
seqslides[6]=[“
seqslides[7]=[“
seqslides[8]=[“
seqslides[9]=[“
seqslides[10]=[“
seqslides[11]=[“
seqslides[12]=[“
seqslides[13]=[“
seqslides[14]=[“
seqslides[15]=[“
seqslides[16]=[“
seqslides[17]=[“
seqslides[18]=[“
seqslides[19]=[“
seqslides[20]=[“
seqslides[21]=[“
seqslides[22]=[“
seqslides[23]=[“
//Set pause between each image display (2000=2 second):
var slidedelay=3000
//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=””
//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.75,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]
if (theimg[1]!=””)
imghtml+='</a>’
return imghtml
}
var curslide=0 //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>
The problem is that when i save this in a content editor, the following code get created as well:
[I]<span class=”seqslidestyle” id=”seqslide0″><a href=”
<img style=”FILTER: alpha(opacity=75); moz-opacity: 0.75″ src=”
<img style=”FILTER: alpha(opacity=75); moz-opacity: 0.75″ src=”
<img style=”FILTER: alpha(opacity=75); moz-opacity: 0.75″ src=”
Therefore, an extra 3 images appear for no reason, and i can’t get rid of them. Even if i try to modify the code and then save it again, another extra tier of 3 images are displayed. I have no idea why it is doing this, but am hoping someone out there has the answer to fix this.
I appreciate any help/advice people may have on this.
thanks
gsidhu