Slide show !!

[wap3]

Hi everyone,

I got this slide show script, which works fine, but I would like to add a bit to it which waits for the photo to be fully loaded before the countdown starts and the next slide is shown.

Can this be done ??

Thanks :thumbsup:


var number_of_slideshows=4

var slideshows=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slideshows[i]=new Array()

slideshows[0][0]='../Images/Barn Tower.gif'
slideshows[0][1]='../Images/Chimney Photo.gif'
slideshows[0][2]='../Images/Fireplace Tower.gif'
slideshows[0][3]='../Images/Mill Tower.gif'
slideshows[0][4]='../Images/Oak Room Tower.gif'
slideshows[0][5]='../Images/Swim Inside Tower.gif'
slideshows[0][6]='../Images/Swim Over Tower.gif'

slideshows[1][0]='../Images/Corner1.gif'
slideshows[1][1]='../Images/RooflineGarage.gif'
slideshows[1][2]='../Images/Gable+Conservatory.gif'
slideshows[1][3]='../Images/CornerOutPhoto.gif'
slideshows[1][4]='../Images/Roofline3.gif'
slideshows[1][5]='../Images/Roofline5.gif'
slideshows[1][6]='../Images/Rooflinepic.gif'
slideshows[1][7]='../Images/Rooflinepic2.gif'

slideshows[2][0]='../Images/Narrow Access Photo.gif'
slideshows[2][1]='../Images/LowReach.gif'

slideshows[3][0]='../Images/Aerial Tow.gif'
slideshows[3][1]='../Images/Aerial Streetlamp.gif'

var maininc=0
var subinc=0
var time = 1000

function slideit(){

if (window.document.slideshow.duration[0].checked == true)
{
var time = 5000
}
else
if (window.document.slideshow[1].checked == true)
{
var time = 10000
}
else
if (window.document.slideshow[2].checked == true)
{
var time = 20000
}

subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
document.images.myPicture.src=slideshows[maininc][subinc]
document.images.myPicture.height=350
setTimeout("slideit()",time)
}

function setslide(which){
maininc=which
subinc=0
setTimeout("slideit()",0)
}

function select(){
newpage = slidesel.options[slidesel.selectedIndex].value

if (newpage != ""){
window.location = newpage
}
}

[jolietjake]

There's a tip to preload images.

On the section head write:

picture = new Image;
picture.src = "/images/image.jpg";

for all your images. Then, if you're lucky, the images would be on cache before your page loads, (and before your script starts)

I think it is what you want (right?)

Joliet Jake, Master of BluesMen

[Vladdy]

While suggested method of preloading images works ok for small pieces such as rollover buttons, waiting for significant number of large images to load can be very time consuming. Users with slower connection would not want to stare at the blank screen for minutes.

The most efficient algorithm would be (I have it implemented; let me know if you are interested in turn-key solution):
- Load the page so your visitors have something to look at. Have some introductory text in place where the images will go.
- Use body onLoad event to initiate image loading and displaying.
- Image loading function would use the onLoad event of Nth image to initiate loading of the N+1st
- Image displaying function would test image for being loaded and increase the delay between images if needed.

[wap3]

Hi

Thanks for the replys. Yer I am not sure if the first method wil work, cause the photographs are quite large.

Vladdy your system sounds good. The kind of thing I was looking for. Can you give me some more information or coding ?

Thanks :thumbsup:

[Vladdy]

E-mail me for details...