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

lightbox.gifEver 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#image001

That’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.

Did this help you out? Like what you see?
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!

☕️ Buy me a Coffee ($3)

My delay – bramus_classeslist is dead, long live bramus_cssextras!

TinyMCE LogoJust an update to tell you that I won’t make it to posting bramus_classeslist online by the end of the month, as I promised, since bramus_classeslist exist no more. Wait, there’s some good news too: bramus_classeslist has changed names to bramus_cssextras as its functionality has been extended to supporting the setting of id attributes on elements too, a quite obvious evolution.

Continue reading “My delay – bramus_classeslist is dead, long live bramus_cssextras!”

My TinyMCE Classes Plugin : bramus_classeslist : The missing (visual) link between the front- and backend

TinyMCE LogoWhen writing a backend for a site combined with TinyMCE I’ve always found it a big hassle to visually link the content of the editor with the content of the actual site. Yeah yeah, there exists something like a content_css setting but that’s not really it as the options are limited. Fed up with this I decided to crank a nifty plugin out of my fingers …

Continue reading “My TinyMCE Classes Plugin : bramus_classeslist : The missing (visual) link between the front- and backend”

My note to myself : Prototype.js vs. JSON.js : 1 – 0 (or JSON.js considered evil)

JSONSpent 1.5 hours today fighting with them javascript libraries after having updated a site from Prototype.js pre 1.5.0 tot the latest version (1.5.1 at the time of writing) as an update of the used script.aculo.us to its latest version (1.7.1 beta 3 at the time of writing) was needed (and that version requires prototype 1.5.1). So what could possibly go wrong with a regular version update? A lot sadly enough.

Continue reading “My note to myself : Prototype.js vs. JSON.js : 1 – 0 (or JSON.js considered evil)”

BRAMUS.IN.SPIRE.US – Update

del.icio.usReceived an e-mail in my inbox from the artviper.net admin Frank after he read my previous post where I explain on how to use his servive to visualizing your del.icio.us bookmarks. All the cons/thoughts I mentioned he answered/knocked off the table making the service he offers even better!

Continue reading “BRAMUS.IN.SPIRE.US – Update”

BRAMUS.IN.SPIRE.US – Bookmarklet to visualizing your del.icio.us’d sites

del.icio.usI myself am a huge del.icio.us fan … the handiness of tagging sites I’ve seen over at work and checking back that list at home just does it for me. Above that it’s darn handy to finding back a site by just typing in some keywords (that flash site with the green background most likely will be tagged “flash background”).

Continue reading “BRAMUS.IN.SPIRE.US – Bookmarklet to visualizing your del.icio.us’d sites”