Modifying Lightbox Script

[netguy]

Does anyone know how to make this

http://particletree.com/features/lightbox-gone-wild/

work so that the lightbox appears upon loading the page rather than having to click on a link?

Thanks!

[jscheuer1]

I don't know what version of lightbox you are working from but for lightbox v2.02 (available from the author's home page) you have something like so at the end of lightbox.js:

function initLightbox() { myLightbox = new Lightbox(); }

If you give one of your lightbox links an id - say 'lightone':

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

You can now modify the code in lightbox.js like so:

function initLightbox() { myLightbox = new Lightbox();
myLightbox.start(document.getElementById('lightone')); }

and that link's lightbox event will fire on page load.

If you are using the same lightbox.js for several pages, they each could have their own link with the id 'lightone'. If you also wanted to use the lightbox script on some pages without a 'lightone' link, do this:

function initLightbox() { myLightbox = new Lightbox();
if (document.getElementById('lightone'))
myLightbox.start(document.getElementById('lightone')); }

[netguy]

Hi John,

Thanks for your response. Actually I'm using the modified version of lightbox used to show HTML content. It can be found here:

http://particletree.com/features/lightbox-gone-wild/

I have no idea how to change it so that it will open the box upon loading the page and not when I click on a link.

Thanks again for your help!

Hock

[jscheuer1]

I've looked over the script and documentation for the 'wild' version and, although I was able to get the lightbox framework (shading and content area) to appear with code that could be appended to the page's onload event, I have yet to be able to determine how to get it to load any particular content at that point. The documentation does explain in detail the various uses of the script but, it doesn't clearly explain how to access that part of it independently.

I may well revisit this project when I feel a fresh look may yield more information. If you could contact the author, you might ask, as it cannot really be all that complicated.

[netguy]

Thanks, John. I finally figured it out. I added

valid.activate()

to the initialize function and it worked.

[jscheuer1]

Aha! That being the case, you can do this, replacing the current function initialize() with (additions red):

var valid=[];
// Onload, make all links that need to trigger a lightbox active
function initialize(){
	addLightboxMarkup();
	var lbox = document.getElementsByClassName('lbOn');
	for(var i = 0; i < lbox.length; i++) {
		valid[i] = new lightbox(lbox[i]);
	}
}

Now, you can choose which item to activate. Each link will be assigned a number from 0 to however many you have minus 1. So, to run the first, use:

valid[0].activate();

For the second:

valid[1].activate();

and so on.

[netguy]

Thanks, John. Great tip!