Multiframe Image Slideshow image jumping

[trenee71]

Hi,

--------------
MultiFrame Image Slideshow script
http://www.dynamicdrive.com/dynamici...frameslide.htm
---------------

I have added a multiframe image slideshow to my site. The images are not preloading or when they load they do not begin at the correct size so when the slideshow starts the first time an image is loaded it appears small then goes to correct size. This causes my page to jump around because the cell the slideshow is in gets smaller.

This happens when I view the page on my computer, and when it's viewed online. I've tried adding the image list to the preload images section i the header, but it doesn't make any difference.

Any help would be greatly appreciated. The site I'm building is for some really wonderful filmmakers.

Thanks!
Tiff


Here's the temporary site where I'm using the script:
http://www.designmotif.com/AFF/index.html

Here's the script:

<td rowspan="10" valign="top" width="134" height="635">
<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]=["images/Slideshow/001.gif", ""]
seqslides[1]=["images/Slideshow/002.gif", ""]
seqslides[2]=["images/Slideshow/003.gif", ""]
seqslides[3]=["images/Slideshow/004.gif", ""]
seqslides[4]=["images/Slideshow/005.gif", ""]
seqslides[5]=["images/Slideshow/006.gif", ""]
seqslides[6]=["images/Slideshow/007.gif", ""]
seqslides[7]=["images/Slideshow/008.gif", ""]
seqslides[8]=["images/Slideshow/009.gif", ""]
seqslides[9]=["images/Slideshow/010.gif", ""]
seqslides[10]=["images/Slideshow/011.gif", ""]
seqslides[11]=["images/Slideshow/012.gif", ""]
seqslides[12]=["images/Slideshow/013.gif", ""]
seqslides[13]=["images/Slideshow/014.gif", ""]
seqslides[14]=["images/Slideshow/015.gif", ""]
seqslides[15]=["images/Slideshow/016.gif", ""]
seqslides[16]=["images/Slideshow/017.gif", ""]
seqslides[17]=["images/Slideshow/018.gif", ""]
seqslides[18]=["images/Slideshow/019.gif", ""]
seqslides[19]=["images/Slideshow/020.gif", ""]
seqslides[20]=["images/Slideshow/021.gif", ""]
seqslides[21]=["images/Slideshow/022.gif", ""]
seqslides[22]=["images/Slideshow/023.gif", ""]
seqslides[23]=["images/Slideshow/024.gif", ""]

//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=5

//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.7,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>

[trenee71]

I may have found the fix here:
http://javascriptkit.com/script/scri...oadimage.shtml

To get rid of the flicker that happens when I set an opacity I keep it set at 1,1. I'd like to use a slight opacity if anyone knows how to get rid of the flicker... What an amazing script. Thank you DD!

Tiff

[jscheuer1]

Jumping right in here without reading too much so, sorry if I am way off base but, by opacity you mean the moz-opacity, right? There seems to be a bug with that. If you start out with anything less than 1 and then bring it up to 1, you get this flicker effect. The work around is to only bring it back up to .99 - that way, no one can tell it isn't 1 because the difference is so slight but, the flicker thing doesn't happen.