Lightbox OnLoad Event

**deathfist** · 12-12-2007, 03:13 PM

Script: Lightbox 2.03a
http://www.dynamicdrive.com/dynamici...box2/index.htm

Can someone help me? I want to make a gallery that will automatically activate Lightbox when the page loads and will show the first photo of the gallery.

We are locally testing the site locally so I cannot give you the link.

**jscheuer1** · 12-12-2007, 03:59 PM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Especially important here, because DD lists two versions of light box. Generally, if you are certain that lightbox is loaded, you can next do:

Code:

var firstLight=document.getElementById('id');
firstLight.onclick.apply(firstLight);

Where id is a unique id you've assigned to the link that you want activated onload. A good place to put this added code is at the end of the lightbox initialization function, to make sure that lightbox is loaded. The precise details vary between lightbox versions. Other arrangements could probably also be made.

To help us verify you lightbox version:

Please include a link to the page on your site that you are using this with.

**deathfist** · 12-12-2007, 05:29 PM

ooops i'm sorry, i'm a newbie here. i am using lightbox2.03a for a project. i have no like yet since we want to finish the site before we upload it online. so we are testing the page locally.

after i place the code inside the lightbox.js, will i need any code to be place on the <body> tag?

**jscheuer1** · 12-12-2007, 07:09 PM

Not if you put the code in the right spot. My first choice would be here, at the end of the lightbox.js file:

Code:

function initLightbox() { myLightbox = new Lightbox();
var firstLight;
if(firstLight=document.getElementById('id'))
firstLight.onclick.apply(firstLight);
 }
Event.observe(window, 'load', initLightbox, false);

For example - say you have a lightbox link on your page like this one:

Code:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Add a unique id to it:

Code:

<a id="the_first" href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Then in lightbox.js:

Code:

function initLightbox() { myLightbox = new Lightbox();
var firstLight;
if(firstLight=document.getElementById('the_first'))
firstLight.onclick.apply(firstLight);
 }
Event.observe(window, 'load', initLightbox, false);

**deathfist** · 12-12-2007, 07:22 PM

wow thanks its worked! i used the previous code you gave.

Code:

function initLightbox() { myLightbox = new Lightbox();
var firstLight=document.getElementById('first');
firstLight.onclick.apply(firstLight);
}
Event.observe(window, 'load', initLightbox, false);

thank you very much! if its not too much can you explain the code that you gave me, specially the:

Code:

firstLight.onclick.apply(firstLight);

**jscheuer1** · 12-12-2007, 07:50 PM

First I'd like to explain why I added the if statement, and also mention that I did so incorrectly due to a typo that I have since fixed. With it, there will be no error, as well as no action taken, if the element with the id isn't there. This is preferable because lightbox.js may be linked to any number of pages, not all of which may have this element on it.

The explanation of:

Code:

firstLight.onclick.apply(firstLight);

is that firstLight (if the link with the id exists and is a lightbox link) represents a lightbox link. Lightbox assigned all rel="lightbox" links the following onclick event:

Code:

myLightbox.start(this); return false;

Calling firstLight.onclick runs the event as an independent function. If we use the apply method, the function's 'this' keyword will apply to the item listed. So it will be as if we clicked on it.

We should go a step further in testing and do:

Code:

function initLightbox() { myLightbox = new Lightbox();
var firstLight;
if((firstLight=document.getElementById('id')) && /^lightbox/.test(firstLight.rel))
firstLight.onclick.apply(firstLight);
 }
Event.observe(window, 'load', initLightbox, false);

That will ensure that the link with the id with the rel including 'lightbox' exists. Let's break it down:

Code:

var firstLight

just establishes the variable.

Code:

if((firstLight=document.getElementById('id')) && /^lightbox/.test(firstLight.rel))

is a compound test and assignment that could be written more clearly like so:

Code:

if(document.getElementById('id')){
firstLight=document.getElementById('id');
if(/^lightbox/.test(firstLight.rel))
then do whatever
}

It sees if the element is available, if so assigns it to the variable, then asks if the element has 'lightbox' at the start of its rel attribute. If all that's in order, then:

Code:

firstLight.onclick.apply(firstLight);

which I already covered.

**deathfist** · 12-13-2007, 07:41 AM

Thank you for the input!

the gallery is working now with using this code:

Code:

function initLightbox() { myLightbox = new Lightbox();
var firstLight=document.getElementById('first');
firstLight.onclick.apply(firstLight);
}
Event.observe(window, 'load', initLightbox, false);

I will also try to implement the other code if I encounter any problem.

Code:

function initLightbox() { myLightbox = new Lightbox();
var firstLight;
if((firstLight=document.getElementById('id')) && /^lightbox/.test(firstLight.rel))
firstLight.onclick.apply(firstLight);
 }
Event.observe(window, 'load', initLightbox, false);

Thanks!

**burnside** · 06-03-2008, 03:27 PM

just wanted to say thanks for this - helped a lot

**robhert** · 06-05-2008, 05:51 AM

Hi, thanks for the code.

The script is working right now and I wonder if there's a way to show it only one time.

I'm using lightbox to load automatic in the frontpage. But I always see the image (lightbox) when I go to index.php. I need to know how can I see (show) the lightbox only one time per visit.

Thank you in advance.

PS. Sorry for my poor English, I'm Spanish speaker. Thanks.

**robhert** · 06-05-2008, 06:05 AM

One more thing,

Is there a way to use the full-image like a link?

I mean, when you see the Full Image, after the thumbnail image-link, Is there a way to make this Full-image an hyperlink? So I can use it like a banner.

I hope you can help me.

Robhert.

Thread: Lightbox OnLoad Event

Thread Tools

Search Thread

Lightbox OnLoad Event

The Following User Says Thank You to burnside For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions