Scripting: Javascript slideshow

started by Crumpet on Feb 19, 2004 — RSS Feed

Crumpet Crumpet
Posts: 11

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 Joe Gillespie
Posts: 528

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 Crumpet
Posts: 11

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 Crumpet
Posts: 11

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 Joe Gillespie
Posts: 528

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 Crumpet
Posts: 11

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 Joe Gillespie
Posts: 528

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 Crumpet
Posts: 11

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 Joe Gillespie
Posts: 528

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...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

     <head>
           <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
           <title>Untitled Page</title>
           <script type="text/javascript">
     function getpic(p)
           {
           if(document.getElementById)
                 {
                 var f = document.getElementById("canvas";
                 f.style.background="url("+p+"";
                 }
           }
           
           </script>
           <style type="text/css" media="screen"><!--
#canvas  { background-color: #eee; background-image: url(imgs/cryslertop.jpg); visibility: visible; position: absolute; top: 86px; left: 18px; width: 287px; height: 189px }
--></style>

     </head>

     <body bgcolor="#ffffff">
           <p><a href="javascript:getpic('imgs/cryslertop.jpg')">Pic 1</a> <a href="javascript:getpic('imgs/amsterdam.jpg')">Pic 2</a> <a href="javascript:getpic('imgs/nightarch.jpg')">Pic 3</a></p>
           <div id="canvas"></div>
     </body>

</html>

Jdenny Jdenny
Posts: 65

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 Sam Desouza
Posts: 14

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

You must login to reply