Question

Imagine a lightbox with a beautiful picture inside it and a button somewhere near to navigate to the next picture…

When the user clicks the next button, JS does like so:

var Image = new Image();
Image.onload = getWidth;
Image.onerror = getFailure; 
Image.src = "http://somewebsite.mr/pics/4.png";

Then when the picture is loaded, JS goes into the getWidth function in order to find out the width of the picture:

w = this.width;  //height is not needed as CSS will adjust it correctly

After that, JS changes the width of the lightbox according to the width of the picture (with a bit add of paddings to make a border). And then, JS changes the src attribute of the picture, currently being shown in the lightbox, to the http://somewebsite.mr/pics/4.png. This changes the picture in the lightbox…

Is that the way lightboxes are built? This works, but I need ensure that it is cross-browser and works fine no matter what. Could you please tell me what you know about developing lightboxes? Is there another way of doing the job? Maybe you know some issues that could harm that program?

EDIT: My concern is whether there is something wrong with image preloading in the case of lightboxes or not. Would it be cross-browser? I know about the rest of the work. I just need to know how change pictures in a lightbox. I’m just new to the image preloading thing. Is it a main technique?

Answer 1

Your concept sounds about right. However, when creating a lightbox, there are numerous cross-browser issues to be aware of. I do not know of a manual or article that lists them all, but maybe you can find inspiration looking into the source code of other lightboxes. I personally have found Greg Neustaetter’s multi faceted lightbox very easy to understand and customize.