« | Home | »

My Code Snippet : Automatically start Lightbox on page load (autoFireLightbox)

lightbox.gifEver wanted to autofire Lightbox so that it shows an image in Lightbox immediately after the page has loaded? It's possible! Someone posted a little Javascript Code Snippet that provides this functionality in the Lightbox Forums, yet his code required an edit of Lightbox.js, which will of course break when a new version is released (it's never a clever idea to edit core files). Thus I took the freedom to modify the implementation a bit (the core hasn't changed though) ...

Instead of editing your Lightbox.js file, you only need to modify your HTML head element so that it includes the extra functionality of kickstarting Lightbox:

PLAIN TEXT
HTML:
  1. <script src="js/prototype.js" type="text/javascript"></script>
  2. <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
  3. <script src="js/lightbox.js" type="text/javascript"></script>
  4.  
  5. <script type="text/javascript">
  6.     // <![CDATA[
  7.         // Automagically load Lightbox on Page Load - by Bramus! (http://www.bram.us/)
  8.         // Code modded from http://www.huddletogether.com/forum/comments.php?DiscussionID=1269&page=1#Item_0
  9.         function autoFireLightbox() {
  10.             //Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
  11.             setTimeout(function() {
  12.                 if(document.location.hash && $(document.location.hash.substr(1)).rel.indexOf('lightbox')!=-1) {
  13.                     myLightbox.start($(document.location.hash.substr(1)));
  14.                 }},
  15.                 250
  16.             );
  17.         }
  18.         Event.observe(window, 'load', autoFireLightbox, false);
  19.     // ]]>
  20. </script>

Note #1: it is important that this extra snippet is placed underneath the 3 javascript includes required by Lightbox as the function calls a variable created within Lightbox.js

Note #2: the reason we're calling a setTimeout (a 250 milliseconds delay) is to fix an issue in IE where the variable myLightbox would be non-existent immediately after page load.

Note #3: getting a myLightBox is undefined error? Great, you're using the most recent Lightbox version ... and that one requires 1 tiny fix ;)

To now use this functionality make sure you have given your a-element an id ...

PLAIN TEXT
HTML:
  1. <a href="images/image-1.jpg" rel="lightbox" id="image001"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

... and then call the page by adding a # followed by that id:

PLAIN TEXT
CODE:
  1. http://mysite.com/lightbox.html#image001

That's it, you're done!

A working demo can be found over at http://www.bram.us/demo/projects/autofirelightbox/#image001

To make things complete: this will not work with flashLightBoxInjector as the swf (or a return from your AJAX call, that's possible too you know), dynamically builds a list of linked images when the swf is loaded/call has been returned.

Spread the word!

  • del.icio.us
  • digg
  • Ma.gnolia

About this entry

Date Published
Published:
Jul 30 2007 / 9:24 am
Categories
Categories:
Another Dailie, Javascript, Webdevelopment
Comments
Comments:
31 Comments
Jump to comment form

Best of Bram.us

My iSmudginator 0.2
My iSmudginator 0.2
Start getting used to scratching and smudging the iPhone with this Flash based iPhone Simulator
The Box Office
The Box Office
Automatically wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.
My Foxification (Pimp Your Firefox to be a web all-star)
My Foxification
Pimp Your Firefox to be a web all-star
The PHP Willow Tree
The PHP Willow Tree
A look at the inc.common.php, spreading handy functions.
My Photoshop Scripting
My Photoshop Scripting
Photoshop Script inspired in the Chlomoscript to unobtrusively pimp photos you have taken.
My TinyMCE File Management
Methods to adding file management options to TinyMCE (Part 1), Extending TinyFCK (Part 2) and PHP file uploads overview (Spinoff 1).