PDA

View Full Version : Second image shows first on Left-Right image slideshow Script



mhollis
01-06-2013, 08:18 PM
1) Script Title: Left-Right image slideshow Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/leftrightslide2.htm

3) Describe problem: This is a Javascript left to right image slide show presentation that I "inherited" on a website written by DD. I was asked by the client to update the slide show with new photos and I have done so.

When the slide show presents, the second image shows up briefly, then is replaced by the first. Then the slide show proceeds normally. You can see this happening at the following link:

visualperceptions.com/rh.html

I don't want to go in and start editing the JavaScript. I would also prever to not have to replace this with another slide show.

jscheuer1
01-06-2013, 09:21 PM
It's because the second image is about half the size in bytes of the first image so is loading faster and because the second image isn't moved out of the way until both images have loaded. We can change that by editing here:


<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>

Change that highlighted line to:


document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:'+scrollerwidth+';top:0px">')

There's a slight chance that the second image might not load until it starts to slide in though. If that happens we can preload it. But I think it will be fine.

mhollis
01-07-2013, 01:05 AM
Thanks for finding the script link for me. I looked around and could not find it.

Are we supposed to NOT post links to a website example in this forum? (I participate in others where everyone wants to see ALL the code).

I am calling this a bug in the script. Anyone who sets up a series of photos for the slide will expect the first image to show to be the first slide.

I do apologize for the website. I did not build it and have asked if the client can free up enough money to get rid of the tables. Yuck!

I would also like to externalize the JavaScript. An external file may fit in a browser cache and the website could simply call it, which would make things load a lot faster. That and also minifying it.

Thanks for the very quick response.

-Mark