Lightbox 2.04 – close button on top

Here’s something that I thought would be nice.

Lightbox is a nifty little JavaScript/CSS package you can download that allows you to make nifty slideshows on a web page with little effort.  Pretty much, your page has thumbnail images that link to the larger images, with a specific rel attribute on the a tags that make the links, and Lightbox takes over to display the large image in a nifty Flash-free box when you click on a thumbnail.  If you have several images, it’ll make a nifty slide show for you.  You can read more and see it in action if you click the link at the start of this paragraph.

Well, the box with the image in it has a close button at the bottom.  What if I want to put it on the top instead?

Googling around, this is the best I could come up with.  This page describes how to make changes to Lightbox 2.03 to move the close button to the top.  However, the current version of Lightbox is 2.04, and if you try to follow the same steps on the page, you’ll find that the line it says to change in the JavaScript file is nowhere to be found.  Yeah, you could just find a copy of Lightbox 2.03 to use, but there actually really are bugs in 2.03 that are fixed in 2.04 (for instance, 2.03 sometimes uses the wrong box/image size in Google Chrome and doesn’t notice when new images with links are added to the page via JavaScript, albeit on that second one there is actually a function you can call to get it to re-scan).

Anyway, yeah, we want to use 2.04.  Here’s how to do it.

First off, lightbox.css.  I added this line at the end of the file.

#outerImageContainer #bottomNav{ position: absolute; top: 0px; right: 0px; z-index: 200; padding:8px; background-color:#FFFFFF; font-size: 35px; }

That’s pretty much the same as the one mentioned in the page above, except for the font-size, which I added to keep the close button from moving slightly up and down when the size of the lightbox changes while switching between images.  Anyway, this pretty much just puts the close button at the top of the lightbox and puts it on top of everything else.

Now for lightbox.js, which is way different.  Find the code that actually builds the lightbox, which starts at line 134.  Replace it with this.

        objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
            Builder.node('div',{id:'outerImageContainer'}, [
                Builder.node('div',{id:'imageContainer'}, [
                    Builder.node('div',{id:'hoverNav'}, [
                        Builder.node('a',{id:'prevLink', href: '#' }),
                        Builder.node('a',{id:'nextLink', href: '#' })
                        Builder.node('a',{id:'loadingLink', href: '#' }, 
                            Builder.node('img', {src: LightboxOptions.fileLoadingImage})
                    Builder.node('a',{id:'bottomNavClose', href: '#' },
                        Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
            Builder.node('div', {id:'imageDataContainer'},
                    Builder.node('div',{id:'imageDetails'}, [

This is pretty much the same as the code that was already there, except I moved the bottomNav node from the imageDataContainer up to the outerImageContainer.  This, plus the style change above, moves the close box from the bottom-right to the top-right of the lightbox container.  See for yourself:

Anyway, that’s it, you’re done.  Now, I’m going to propose one more fix, if you’re interested in captions to go along with your slide show.  If you have an image with a caption followed by an image without a caption, Lightbox will not remove the caption when you advance from one image to the next, because it only updates the caption if it is not blank.  See the if statement at line 330 in lightbox.js:

        if (this.imageArray[this.activeImage][1] != ""){

Add this code right after it to make sure the caption goes away when it should:

        else {

And that’s all.  If you’d like, I’ve uploaded here a copy of Lightbox 2.04 with the modifications mentioned in this post.

15 thoughts on “Lightbox 2.04 – close button on top”

  1. Nice post. You saved me a few hours there! Clients wanting websites with no scroll bars… you gotta still be able to see the close button on that 945×700 lightbox on a laptop ;)

  2. fantastic!!!.. Was desperately looking for this help all across the net….Thank you very much

  3. this is great and worked perfectly!! thank you so much. does anyone know how to move the captions to the top too? thanks in advance.

  4. Thanks! Excellent improvement. Additionally, in lightbox.css, I changed the imageContainer padding to #imageContainer{ padding: 40px 10px 10px 10px; } so the “close” button sits above the image rather than on top.

  5. Nice… posted allmoust year ago but still helping, thanks!

    Could you post solution how to replace this damn “closelabe.gif” image with simple TEXT link like at lightbox “1” – something like “Press X to close” with closing link under “x” – can’t figure out how to do this :(

  6. Thanks very much.
    I had a problem showing the full image because of the button, so i added the lines Alli posted. The image jumped out of the container downstairs. I added the following lines to solve the problem: #outerImageContainer{ …. padding: 0 0 32px 0;}

Leave a Reply

Your email address will not be published. Required fields are marked *