Javascript slideshow | WPDFD.com Forums

Crumpet said:

02/19/04, 050 37 2004 2004:%i:1077179852 03:37:32

Hi,

This is my first post here, and I have a question about coding a Javascript slideshow. First though, a little history -- I am entirely self taught with web design... basically, I've learnt things by doing them. I started out with basic HTML and recently decided to redesign my site and add some more "technical" aspects. The tutorials on this site have been really helpful, and I now have a decent understanding of layers, CSS, etc.. On my site, I decided I wanted to have something that worked like a frame, yet wasn't a frame. I found this tutorial and have executed it on one page of my site so far, but have a question.

This is the page I've done -- http://www.crumpart.net/test2/artprints.htm -- none of the links at the top of the page will work yet, as it's the only one I've uploaded. Clicking on the thumbnails to the left should work though -- the full image and description appears in the space next to the thumbnails.

My problem is with this bit of code that was listed in the tutorial:

************************************************

// slide 6 is a special case with timed bullets
// so we call the bullets() function
// to display them sequentially
if(n==6)
{
bullets(true);
}
else
{
bullets(false);
}
}
else // its an old browsers
{
return false;
}
}

// if t is true, a delay is introduced between
// each visible bullet point
// if false, there is no delaty and the bullets are hidden
function bullets(t) // runs through lines 1 to max
{
index=1;
s=t;
if(t)
{
delay=secs*1000;
}
else
{
delay=0;
}
for (i=0;i<=max;i++)
{
time=setTimeout('showit(s)',delay*i);
}
clearTimeout(time);

}

************************************************

It seems to me that it is about the bullet points, which are not relevant to my site, but when I delete this bit of code, the script stops working for me. As I said, I'm very, very new to Javascript, so if I'm doing something obviously dumb, please forgive me! Help/an explanation would be very much appreciated. Thanks.

Joe Gillespie said:

02/19/04, 050 19 2004 2004:%i:1077182347 04:19:07

You have the right idea about removing the bullet-specific code except that you removed too much. Just remove this section...

// slide 6 is a special case with timed bullets
// so we call the bullets() function
// to display them sequentially
if(n==6)
{
bullets(true);
}
else
{
bullets(false);
}

but leave...

}
else // its an old browsers
{
return false;
}
}

See if that fixes your problems. By the way, if you are debugging JavaScript, you really should (if you haven't already) get hold of Mozilla, the JavaScript debugger in Mozilla can help pinpoint such problems.

And you can delete the bullets() function as it is no longer called.

// if t is true, a delay is introduced between
// each visible bullet point
// if false, there is no delaty and the bullets are hidden
function bullets(t) // runs through lines 1 to max
{
index=1;
s=t;
if(t)
{
delay=secs*1000;
}
else
{
delay=0;
}
for (i=0;i<=max;i++)
{
time=setTimeout('showit(s)',delay*i);
}
clearTimeout(time);

}

Crumpet said:

02/19/04, 050 35 2004 2004:%i:1077183359 04:35:59

Thanks -- that's awesome. It works perfectly now.

Thanks also for the tip about the Mozilla debugger. I have Mozilla already (I use Safari for browsing generally, but have a whole range of browsers for checking my site) and will give it a go next time I have a problem.

Crumpet said:

03/08/04, 068 12 2004 2004:%i:1078780324 16:12:04

One more thing...

Is there a way to stop all the slide images preloading with my thumbnails, instead having the corressponding image load up when someone clicks on a particular thumbnail? I've just put my "finished" site up at http://www.crumpart.net and, where I've asked for advice, some people have said that some pages take too long to load, and I've discovered that this is the issue. If you go through to the art/photo/shop links, you should see what I mean.

Advice would be greatly appreciated!

Joe Gillespie said:

03/09/04, 069 44 2004 2004:%i:1078814658 01:44:18

I does take rather a long time to load. You could improve the perceived speed by NOT preloading all the larger images.

This http://www.wpdfd.com/wpdslid2.htm shows you how to load up pictures in the background while the reader is looking at the previous one. It means that the slideshow has to be sequential and not random acesss, but it's a lot faster. You would have to dispense with the thumbnails to stop random order access.

Crumpet said:

03/09/04, 069 03 2004 2004:%i:1078869813 17:03:33

so there's no way to keep the random access??? i really don't want to do it sequentially...

or are your first and second sentences separate ideas? (soory, it's morning, and my brain isn't working too clearly!)

Joe Gillespie said:

03/10/04, 070 18 2004 2004:%i:1078903101 02:18:21

To have random access, all the images have to be preloaded because you don't know which one the reader will choose to view next. With sequential viewing, the script knows which is the next image to preload in the background.

If you don't preload the images, there will be a noticable delay between clicking on the thumbnail and the image appearing, but even that is preferable to having to wait for them all to load before you can view the first one.

Crumpet said:

03/10/04, 070 47 2004 2004:%i:1078955220 16:47:00

yeah -- i don't mind if there's a delay in this instance. at least that way, if somebody just wants to look at one or two things, they don't have to load every single image just to see those couple. plus it cuts down on my bandwidth usage.

i've tried to make each image a small enough file size so that it loads as quickly as possible without compromising (too much, at least ) on quality, so people on high speed connections shouldn't notice too much of a difference in loading time, and people on slower connections shouldn't have to wait too long.

so, next thing, how would i go about putting a command in to stop all the images preloading? i'm pretty new to all this sort of stuff, so if you could point me in the right direction to a similar example or something, i would greatly appreaciate it!

Joe Gillespie said:

03/11/04, 071 29 2004 2004:%i:1078982994 00:29:54

With a pure JavaScript solution, you normally put a preloading script on a page to make sure that when somebody rolls over a button, the 'over' state is already cached. With the slide show script you are using, it doesn't work like that, it works by hiding layers. When the page is loaded, it loads all the images, even the hidden ones. When somebody want to see one, it is made visible instantly.

Here's another little trick that loads on demand, I'll leave it to you to sort out the niceties...





      
            
            Untitled Page
            
            

      

      
            Pic 1 Pic 2 Pic 3

Jdenny said:

03/13/04, 073 41 2004 2004:%i:1079221278 18:41:18

you cold have random access - the computer picks the random image and not the user - just pick one image in advance!

...user clicks 'next', computer displays pre-loaded image, computer picks another image at random and preloads it (for next time the user clicks 'next')...

Sam Desouza said:

10/28/09, 301 29 2009 2009:%i:1256736544 09:29:04

Hi..thanks for the information… loved it simply Oh man! What an amazing thing to say
web design London