Customizing your Lightbox code » Skylish

Customizing your Lightbox code

YOUR JOURNEY SO FAR: Home » Tutorials » Customizing your Lightbox code

Tutorial hardness:

Rate this tutorial:

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
- Lokeshdhakar

In this short tutorial I will teach you how to customize your Lightbox code. I will not be teaching you how to install the code, however you can learn how to do that in a tutorial here (that's where I learned).

First, let's figure out what each of the files you get are for:

Lightbox.js - Along with a bunch of techincal stuff, some images (such as the close button) are contained in this file.
Lightbox.css - This file is essential to editing the look of your Lightbox script.

Any other files contain things that we really should not attempt to edit.

Lightbox.js

In this code you can match the loading image and close image to images of your choice. I make my close image on Paint Shop Pro 8 and size it 31x28. As you can see, it's nothing special.

For the loading button, I found this amazing website Ajax Load that supplies them. Just by searching 'Loading Generator' on Google, you can find various other options.

WHERE TO SLOT IN THESE IMAGES?
You will find the following code somewhere at the beginning of the lightbox.js file, replace the writing in CAPS with your image codes:

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = 'http://LOADING IMAGE LOCATION';
var closeButton = 'http://CLOSE IMAGE LOCATION';

Lightbox.CSS

Now onto the CSS.

There are various divs which define different elements within the Lighbox code:

#lightbox - This is what actually contains your image. For mine, I added in a background-color and a padding of 20px. You may choose to add a border.
#lightboxDetails - This section defines what the text on your Lightbox looks like. So make sure to supply a font-family, font-color, font-size, etc.
#closeButton - This allows you to add a bit more to your 'close' button, such as a border; on in my case: padding.
#overlay - This is the background that appears once you open up your image. Many choose to supply a semi transparent background, or no background at all. To make a semi transparent background I use Paint Shop Pro 8, adjust the transparency and make sure I save it on optimized PNG settings.

My Lightbox.CSS code:

#lightbox {
background-color: #ffffff;
padding : 20px;
}
#lightboxDetails {
font-size : 11px;
font-family: Arial;
font-weight: normal;
color: #404040;
padding-top : 10px;
}
#lightboxCaption {
float : left;
}
#keyboardMsg {
float : right;
}
#closeButton {
padding-top : 5px;
padding-right : 5px;
}
#lightbox img {
border : none;
clear : both;
}
#overlay img {
border : none;
}
#overlay {
background-image : url(http://skylish.co.uk/overlay2.png);
}

Good Luck! ^_^