PDA

View Full Version : Lightbox OnLoad Event



deathfist
12-12-2007, 03:13 PM
Script: Lightbox 2.03a
http://www.dynamicdrive.com/dynamicindex4/lightbox2/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 (http://www.dynamicdrive.com/forums/showthread.php?t=6) 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:


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:


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:


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

Add a unique id to it:


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

Then in lightbox.js:


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.


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:
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:


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:


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:


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:


var firstLight

just establishes the variable.


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

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


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:


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:

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.

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!:D

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.

mankul
09-26-2008, 01:07 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.

I think for a one time pop up, you would need to use a function that installs a cookie into the browser of the visitor. But I'm not good at php so I don't know how to code it, but I understand that it can work that way.

When the visitor visits the site for the first time, a cookie will be placed in the browser.

The next time the visitor come to the website again, the function will check for the cookie, whether its there.

I have a request, my onload lightbox will have the option to choose a language for my website. So everything the returning visitor visits the website, the function will check for the cookie for the chosen language, if the cookie doesn't exist, then the onload lightbox will appear to ask for the preferred language.

Anyone? greatly appreciate it!:D

jscheuer1
09-26-2008, 01:14 PM
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.

For that a javascript cookie would do just fine, using the code at http://www.quirksmode.org/js/cookies.html:


function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

You could then have something like so:


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



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.

Version 2.03a already has linking of the caption, perhaps that would be good enough. If not, some modification to the lightbox.js code would be required, and you would not be able to do this on grouped images, as the next/previous buttons would cover the link.


I think for a one time pop up, you would need to use a function that installs a cookie into the browser of the visitor. But I'm not good at php so I don't know how to code it, but I understand that it can work that way.

When the visitor visits the site for the first time, a cookie will be placed in the browser.

The next time the visitor come to the website again, the function will check for the cookie, whether its there.

I have a request, my onload lightbox will have the option to choose a language for my website. So everything the returning visitor visits the website, the function will check for the cookie for the chosen language, if the cookie doesn't exist, then the onload lightbox will appear to ask for the preferred language.

Anyone? greatly appreciate it!:D

Lightbox cannot be used to provide a language choice for your users, and even if it could, or you were to use something like lightbox gone wild that can, it shouldn't because a choice like that is too basic to leave to javascript (which some users will not have available).

And you're right, in your case a server side cookie should be used to store the user's language preference, ask about it in the PHP forum:

http://www.dynamicdrive.com/forums/forumdisplay.php?f=11

mankul
09-26-2008, 02:33 PM
We should go a step further in testing and do:


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);



I"m using lightbox 2.04, is the above code still applicable for onload?

below is the lightbox.js that I'm using. Where should I insert the code?

Thanks for replying after 10 months since your previous post! :)

below is the lightbox.js file that I'm using:
http://www.ahmadiah-idrisiah.com/js/lightbox.js

jscheuer1
09-26-2008, 02:53 PM
No. For one 2.04 uses a different method for activating the links that will not work with the code provided. And it uses a different method of initialization as well. I think it can be adapted, but I will have to investigate how.

Or, you could use the Dynamic Drive version for which the modifications in this thread are already worked out.

jscheuer1
09-26-2008, 03:17 PM
For version 2.04, find this code (in lightbox.js) around line 173 and add the highlighted part:


var th = this;
(function(){
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id){ th[id] = $(id); });
if (document.getElementById('first')) {
th.start(document.getElementById('first'));
}
}).defer();

},

Then just give your onload link that id, ex:


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

mankul
09-26-2008, 03:29 PM
thanks a lot! it worked!

I've been searched everywhere on the web for v2.04 onload but couldn't get any.

:D

lange
11-10-2008, 02:06 PM
thanks for this info works like a charm

Lange

dantg
07-17-2009, 07:17 AM
Just wanted to say thanks :) - cool script :)