• Choose a category
• All
• Classic-Fiction

.css('opacity', '0')

.animate({'opacity': '0.5'}, 'slow')

.appendTo('body');

$('

.hide()

.appendTo('body');

$('')

.attr('src', $(this).attr('href'))

.load(function() {

positionLightboxImage();

})

.click(function() {

removeLightbox();

})

.appendTo('#lightbox');

return false;

});

The overlay is positioned at the top of the screen, and quickly faded from invisible to 50% opacity to provide the background effect. The lightbox container is added to the page and immediately hidden, awaiting the loading of our image. The image is added to the container, and its src attribute is set to the location of the image (extracted from the link’s href). To do this we use jQuery’s powerful attr method, which can be used to retrieve or set any attribute of a DOM element. When called with only one parameter (such as $(this).attr('href')), it returns the value of that attribute. With a second parameter (for instance, $('').attr('src', …), it sets the attribute to the value provided.

Then we attach a few event handlers to the image. One of these events is new to us: load. It’s a close cousin to the ready event, but fires when an element (in this case our image) is 100% loaded.

Tip: Quick Element Construction

Creating new elements is very satisfying, and a task you’ll have to do frequently. There’s an alternative way to set up a new jQuery object, which involves passing an object as the second parameter. The object contains all of the attributes and settings you want the new item to have. For example:

$('', {

src: $(this).attr('href'),

load: function() {

positionLightboxImage();

},

.click: function() {

removeLightbox();

}

}).appendTo('#lightbox');

jQuery has a bit of smarts in how it reacts to the properties you set. If you give it an event, it will bind the provided handler to the event (as we’ve done with load and click). If you use a jQuery method name like text, html, or val, it will use the jQuery methods to set the property. Everything else will be treated as an attribute, as done with the src property. The end result is the same jQuery object as the one we constructed before, but if you’re comfortable with JavaScript object notation, you might prefer this method of element construction.

Finally, we add a return false; to prevent the default behavior of the HTML link from occurring. Otherwise, the user would navigate away from our page and to the image itself.

Now let’s have a look at the positionLightbox function:

chapter_04/01_lightbox/script.js (excerpt)

function positionLightboxImage() {

var top = ($(window).height() - $('#lightbox').height()) / 2;

var left = ($(window).width() - $('#lightbox').width()) / 2;

$('#lightbox')

.css({

'top': top + $(document).scrollTop(),

'left': left

})

.fadeIn();

}

When the image is done loading, the positionLightboxImage function is called. This takes care of displaying the image in the center of the screen. It calculates the central point by taking the window’s height or width and subtracting the image’s height or width, then dividing the result by 2. It then performs a nice fade to display the image.

The last task left to do is remove the lightbox when the user clicks on the image. We simply fade out our new elements and then remove them, so that the lightbox is ready to be triggered again for the next image:

chapter_04/01_lightbox/script.js (excerpt)

function removeLightbox() {

$('#overlay, #lightbox')

.fadeOut('slow', function() {

$(this).remove();

$('body').css('overflow-y', 'auto'); // show scrollbars!

});

}

This is probably the most bare-bones lightbox you can imagine, but it’s still satisfying to see in action. Now that you have an idea of how a lightbox is built, you can come up with improvements and customizations. Even though plugins may be plentiful, sometimes building them yourself is more satisfying!

Troubleshooting with console.log

If you’ve had a go at extending or customizing this simple lightbox (or, for that matter, any of the code