Invoking Lightbox2 slide show on page load

Invoke Lightbox2 on page load? Good question! If you have got frustrated searching for a solution to it, relax, it’s here!

Just place the following snippet of javascript code in your web page’s <head> section:

//< ![CDATA[
  function autoLoad() {
    setTimeout(function() {
      myLightbox.start($("linkID"));
      },
      250
    );
  }
  Event.observe(window, 'load', autoLoad, false);
//]]>

Note linkID at the 4th line. This is the id of your href tag attached to the first image of your slide show so the resulting href tag looks like this:




It should be easy and quick for someone familiar with lightbox2. It works in IE, Firefox, Safari(Windows) and Chrome. Note that THIS EXAMPLE WILL NOT WORK WITH lighbox2.04 IN BROWSERS EXCEPT Firefox! So, why not replace your lightbox2 script with one archived here with this example? You can download fully working sample here.

5 thoughts on “Invoking Lightbox2 slide show on page load

  1. Isn’t the point of this to start the slideshow when the page loads? The sample only starts the slideshow when you click on the picture, not when the page loads – or am i doing something wrong?

    1. @Tiffany – Only to re-confirm i tested it in Firefox 3.0.6, IE8, Google Chrome 10.0.648.204, Safari 5.0.2 and Opera 10.10 just now and it worked just fine. I am not sure how you try it but i would download the sample.zip extract it to my server root (c:/wamp/www) and call it as http://localhost/sample/sample.html in my web browser and it works just fine. I hope that helps.

    1. @Jason – Thank you for pointing this out. Was missing js folder in the attachment, sorry for that. Uploaded complete pack now. Also, added a complete slide show in place of single image as stated in the post above, so LinkID’s goes LinkID0, LinkID1, LinkID2, LinkID3 now. Please treat accordingly.

Leave a Reply

Your email address will not be published.