Wednesday, August 22, 2007

Lightbox, Leightbox and my improved Leightbox

For my latest project I wanted to include a nifty 'Lightbox effect'. The original Lightbox effect however is limited to displaying images and I wanted to show HTML.. So I searched the net and came across Leightbox. Leightbox is a modification to Lightbox which allows you to easily display a piece of HTML (a DOM node actually) using a lightbox effect..

The problem with Lightbox however is the way it binds itself to click events.. You can only load a Leightbox using a click event.. I wanted to have a Leightbox appear using a timer, so I looking into the source and came up with the following:

1) change the initialize function inside the lightbox.prototype to:

initialize: function(ctrl) {
if(ctrl) {
this.content = ctrl.rel;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
}
},

What this does is check if the 'ctrl' variable is actually passed.. If it isn't, the function does nothing..

2) Add a new function:

initCallable: function(rel) {
this.content = rel;
},


3) You can now manually load up your Leightbox of choice by calling the following:
lb = new lightbox();
lb.initCallable('idOfDiv');
lb.activate();


Update: this technique is no longer valid or neccesary in the current Leightbox version.
New instructions:
1) Leave the lightbox.js (from leightbox) unmodified (download the latest version at: http://eight.nl/files/leightbox/)
2) Remove the class="lbOn" from your lightbox activating links
3) Create a javascript var (outside a function):
var myLightbox;

[4) Use an intialization function (i.e. body onload="initFunction"):
myLightbox = new lightbox($("IDOfActivationLink"));
(Don't forget to set the rel property of the link to the DIV's id you want to show (like you normally would with Leightbox))]

You can now use myLightbox.activate() and myLightbox.deactivate() to turn on/off the lightbox.

10 comments:

Anonymous said...

Hello, can you anwser me if i can use Leightbox passing the HTML code as string to show in popup? something like lb.show(htmlCode)

And is it possible to pass data from popup to the parent window?

please if you read this post, reply in blog and in my email: k40zryan at yahoo dot com dot br

thanks in advance

Rupert said...

I was searching how to make the lightbox display on onload and managed to do it using your function. Thanks for sharing!

Anonymous said...

It worked for me too. Thanks so much for making it available to the public; mine was pretty hacked up as it was and thankfully yours blended nicely without my having to change a bunch of other stuff around.

Anonymous said...

Hi!
Thx for taking the time!

I followed your steps but it does not work for me.

There aren't any error messages so I think I changed it properly.

I changed the initialize-Part, pasted die new lines staight after the changed part and added the third part into my HTML (which is pretty the same html-test-page Leightbox comes with)

Leightbox still works by clicking on the links but not the automatically load when I start the page.

Any ideas? Would be great cause I'm searching for such a leightbox-onload-solution for 2 days.

Thx in advance!

P.S. - Do I have to put it in the body onload-tag?

Anonymous said...

Hey,

Thanks a lot for the code :)

IE complains that 'this.content' on line 130 something 'requires an object', which is confusing as this.content is the id of my div element.

Any ideas?
(works in FF fine)

Anonymous said...

Hey you guys,

Anychance someone has figured out the problem yet. So far, I had it working in ie7 and FF, not ie6.

Something to do with initailising the displayLightbox function before the dom object is ready.

Don't call onLoad in the body tag. Call with:

Event.observe(window, 'load', YourFunctionNameToCallLighBox, false);

Anonymous said...

I have been trying out lightbox and various other options all day with the same goal you had. Eventually after stumbling across your blog, I am very happy again! Thanks a million - we 'cut and pasters' really need guys like you!

Anonymous said...

Hey Guys, I found this Leightbox very useful. However I found a bug that I don't know how to fix. If I have my link to the "Leightbox" at the bottom of a long page, i.e. I need to scroll down to be able to click the item that triggers the Leightbox function. For some reason FF doesn't automatically take me to the top of the page so I can see the content of the light box. I have to scroll to the top of the page to see the Leightbox info. It works in IE, it takes you to the top of the page then when you close the box it takes you back to where you were on the page. Which is how it should work. For some reason FF doesn't. I have looked high and low for a solution, any ideas ? Thanks!

pop display said...

Hi,

I visited your blog through Google and found it to be informative and interesting. Thanks for your valuable efforts......


Lightbox Display

Michael said...

Hi,
Thanks for this fix, BUT

I have 0 Javascript knowledge...literally 0. Can you upload your new Leightbox for download with all the code already fixed?

I just don't know how to create variables or use any of this.

Thanks!