Ever wanted to automatically start Lightbox so that it shows an image immediately after the page has loaded? It’s possible!
Someone posted a little Javascript Code Snippet that provides this functionality in the Lightbox Forums. Although the code is OK, it requires editing Lightbox.js, which will of course break when a new version is released (it’s never a clever idea to edit core files).
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:
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<script type="text/javascript">
// Automagically load Lightbox on Page Load - by Bramus! (https://www.bram.us/)
// Code modded from http://www.huddletogether.com/forum/comments.php?DiscussionID=1269&page=1#Item_0
function autoFireLightbox() {
//Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
setTimeout(function() {
if(document.location.hash && $(document.location.hash.substr(1)).rel.indexOf('lightbox')!=-1) {
myLightbox.start($(document.location.hash.substr(1)));
}},
250
);
}
Event.observe(window, 'load', autoFireLightbox, false);
</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 …
<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:
http://mysite.com/lightbox.html#image001That’s it, you’re done!
A working demo can be found over at https://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.
Consider donating.
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!
Great snippet!
Thank you for sharing, I have put it to good use. Do you use the same creative commons license as Lightbox? Asking, just to be sure what to do if I repack it and distribute it in e.g. wordpress plugins.
Hi Bramus,
Just checked out your on-page-load Lightbox script and I think it’s excellent. However, if I’m correct, you still need to mention all your image sources in the code of your page.
Can you think of a way to refer to a single folder-name in your “a href”?
I have these huge collections of different image galleries and I think I will go crazy if I have to type hundreds of hidden tags.
To clarify my issue, this is how my start off page should look like:
» gallery 1
» gallery 2
» gallery 3
» gallery 4
…
These are links to different image galleries in different folders.
Hope this makes any sense to you.
If so, can you hand me some clues…?
Thanks in advance and keep up the good work.
Korjuin
@ Niklas: Creative Commons indeed (attribution, sharealike, non-commercial)
@ Korjuin: The image sources indeed need to be specified in your document (viz. the needed HTML for the Lightbox need to be present).
@ Korjuin: if you use a set of images as set per Lightbox specification via the rel attribute (rel=”lightbox[myset]”) and use the autoFireLightbox functionality, the sets still will be respected, as autoFireLightbox works via the id of an element (viz. as the rel attribute lives outside the id attribute they have no influence on each other.)
Is it to possible to view the image randomly?
I have an array of image which I want it to be load randomly when the page load.
function popUp(){
var images = [],
index = 0;
images[0] = ““;
images[1] = ““;
images[2] = ““;
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
}
Can we use html in lightbox instead of images.
Hey,
I am trying to use lightbox inside a iframe. The lightbox code works great inside the iframe but i want to start the first image. Would I need to mod this code to acclomplish this?
//
Any help would be appreciated. Thank you so much for this script!
Oh yeah, forgot the code but it seemed autoFireLightbox function couldnt find my lightbox rel tags inside the iframe…
@ Ed : you have to add this code inside your iframe (and change the iframe URL to have a hash); or you have to change line #13 to target the iframe (untested, but I think it’s this one here):
$('idOfiFrame').myLightbox.start($(document.location.hash.substr(1)));Great script. Works perfect. Thanks for the post.
hey
great work… although i am a bit new to this but kinda get it… can you please help me .. i cant get it to work for me… im calling it and it does not load at all..?:( any chance you can please send me a simple file with it in..?
many many thanks
s
html can be charged instead of images, how to do
hi
i wanted to use light box twice in a single page. First when the page loads( as done in your example) and then again when i click on a particular link. Can i be done?
Thanx
Prabh
I’m getting an error for myLightBox being undefined in both IE and Firefox 3. I’ve increased the 250 milliseconds to 1000 just to see if that would help. It didn’t.
Has anyone else had this problem? A fix?
@Eric: This fix is needed 😉
Great script!!!! But…
this instruction .. and then call the page by adding a # followed by that id: I want to avoid as I want to launch the script on my index page and simply I cannot add any parameters, Is it possible.
Please answer ASAP.
Regards,
Greg
@Greg: If you know the ID of the element, then you can – instead of looking for the page it’s location hash (which the script does) – invoke Lightbox by directly calling it via
myLightbox.start($('myId'))Is their anyway to make this load only on external links in? (i.e so if someone was already browsing your site and clicked home it wouldn’t show up again)
Im having the same issue as Greg and urgently need a way out of it.
Everything is working great, but I cant use it on my index page.
Would you mind dumbing it down for me how I go about finding the ID of the element and where to edit the code.
thanks in advance
could someone please explain how you save a file for the web with the extention of “.html#image001”
Hey Brambus, I came across this page from:
http://www.ibegin.com/labs/forum/comments.php?DiscussionID=63
Your set timeout function appears to be a good solution for this problem, although I haven’t tried it yet. I’m not using huddletogether.com’s lightbox, but instead ibegin’s ibox, as shown in the link above. Do you think you could please modify your script above for ibox? (I’m not that good with javascript)
I’m afraid I’m having the same confusion as Di. On this page, http://www.floatfishingconnection.com/xtestpagex.htm I added the additional code and made the changes as specificed to the 2.04 js file, but Frontpage will not allow me to save a webpage with a html#image001 after it? I can honestly say that I’m a little confused as to this image tag thing and how exactly it works?
What I’m attempting to do is have the promotion of the “steelhead contest” pop up and accounce itself as the page loads automatically, but it just isn’t working?
Thanks,
Dj
I am following up on two of the questions (from @al and from @Lista) – I wanted to lad an HTML page instead of an image and it is not following up. Any idea why?
How can I use:
image #1
instead of an image in the href?
Thanks for posting this. I wasn’t looking to auto-fire a lightbox onload, but was trying to figure out how to launch a lightbox via JS – simpler than I thought.
Thanks!
Thank YOU! After parsing the querystring, writing some unreliable script – I found this. You saved me!
I feel really stupid but I don’t understand how to automatically load the lightbox when the page loads. I just don’t get it from your information above.
… and then call the page by adding a # followed by that id:
http://mysite.com/lightbox.html#image001
I don’t understand what this means. How does the page load the lightbox if there is no onLoad event? What am I missing?
Any information would be helpful to get my head around it. Thanks.
i got the error…
“effect is not defined..” can some 1 help me ?
Does anyone know how to modify this to work with lightwindow? http://stickmanlabs.com/lightwindow/
Searched a long time to find someone that had the ‘lightbox onload’ problem solved. Not a savvy I am so I study the scripts just for fun without the heavy load of knowing what I do…great!
Thank you so much for Note #3! It just saved me a lot of time and headaches
I too would like to know if this can be modified to work with lightwindow? http://stickmanlabs.com/lightwindow/
This is very handy indeed, thanks Adam!
is possibile also lightview?
Heya,
This is AWESOME!
I added a mod that updates the anchor tag as you go through a series of images. Right now, if you click to the next image, the hash tag doesn’t change. Simple fix, but it does mean editing lightbox.js.
http://www.marcscheff.com/lightbox-with-unique-urls
Hi, thank you for your suggestions!
For version 2.04, I modified the last line of code in “lightbox.js”. This is the new line:
document.observe(‘dom:loaded’, function () { myLightbox=new Lightbox(); });
To auto-launch lightbox when page loads (that’s all I needed for my pourposes), I just added a where “id1” is the id of the A tag surrounding the image.
A BIG thank you to you for your work!
… I just added a onLoad=”myLightbox.start($(‘id1’)); where…
everythings works, except the goddamn image never loads, help!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
cooollllllll one firstly i got an error mylistbox is undefined but ,,,
manage to fix it …………
i replace document.observe(‘dom:loaded’, function() { new Lightbox(); });
with
document.observe(‘dom:loaded’, function() { myLightbox = new Lightbox(); });
then it works……….for me…………….
Hi Bram,
Thanks for your work. In your posting you say you have to change the ‘html head’, but what is that? The closest I could find are the files index.php but that doesn’t seem similar to the file you have.
Thanks already & regards,
Jeroen.
Hi!
Thanks for this great mod! It’s exactly what I was looking for.
Keep up the good work! Cheers!
Hello. I’m having some issues with setting up your autoFire Lightbox, even with the corrections cited on the page in Note 3. Basically, my id’s don’t trigger the autoFire effect. I’ve triple-checked all the code and have made sure to apply the changes specified above, as I was using version 2.05. I wonder if it may have something to do with the way my WordPress settings handle permalinks? I will also try using your older Lightbox file as one last shot, and then attempt this with an html page, as opposed to the PHP files used by WordPress, before I throw my hands up in the air, completely.
Thank you in advance for any clarification you can provide.
Thank you, Bram, for the help you provided in getting my implementation to work! And thanks again for this excellent lightbox addition.
I wish you much good luck with your endeavors.
Can someone help me out and tell me what I am going wrong? I have followed this tutorial, but I can get the page to modal window to load.
// Automagically load Lightbox on Page Load – by Bramus! (http://www.bram.us/)
// Code modded from http://www.huddletogether.com/forum/comments.php?DiscussionID=1269&page=1#Item_0
function autoFireLightbox() {
//Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
setTimeout(function() {
if(document.location.hash && $(document.location.hash.substr(1)).rel.indexOf(‘lightbox’)!=-1) {
myLightbox.start($(document.location.hash.substr(1)));
}},
250
);
}
Event.observe(window, ‘load’, autoFireLightbox, false);
I know that it says that you have to call the lightbox.html, but I do not have that html file when I download lightbox and the only thing that it does is shows a thumbnail up in the top right hand corner of the page. Any help is appreciated.
Thanks,
Phil
I am not getting this auto-loading working either, does it no longer work with the latest light box code or something? I can’t believe how hard it is to get this to auto start, extremely frustrating. Any help would be greatly appreciated.
Great, working so fine :o)
Hi! Nice job, man!
I was thinking how to kill the person who asked me to “change” some functions of Lightbox, in fact, he wanted me to add some functions like Facebook and Twitter buttons… my problem was when the person comes from facebook to show directly a Lightbox…
Thanks by your code. I changed it and now everything’s fine!
See ya o/
Clever… 😉
Very kind of you to share this information.
It works perfectly. I just needed to change the lightbox.js file in the last line and substitute the line you explained above.
I am having the same trouble as many others trying to get this to work on my index page. I saw the response you provided by invoking lightbox via: myLightbox.start($(‘myId’)), but It is not working for me. Can you paste the entire script with this functionality?
function autoFireLightbox() {
//Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
setTimeout(function() {
if(document.location.hash && $(document.location.hash.substr(1)).rel.indexOf(‘lightbox’)!=-1) {
myLightbox.start($(‘image001’));
}},
250
);
}
Event.observe(window, ‘load’, autoFireLightbox, false);
any help is appreciated
I am trying to do this with Lightbox 2.51. Is there an update for the code so it works with this new version? If not, where can I find the older versions of all the files need to make this work?
Thanks
I also try to make this work with 2.51v . Someone found a solution, please mail me!
Thx!
Hye there,
I need some help for you regarding popup lightbox.
– how to create lightbox (that will appeared our Facebook fan page) for OpenCart?
*I mean the popup lightbox will appear on our main page (home)
nice! ive been looking for this code, this also applies if the popup is not only on image i used a form instead. thanks.
This is just what I have been looking for for a while now. I too have the newest version of Lightbox (2.51) as some of the other guys and can’t get it to work. Is it possible to modify the code in a way to get it working?