Absolute Orange

Enhancing Lightbox

Written on Wed, 19th August 2009
By Amy Varga

I like Lightbox. I use it in this website and in Rocklands Boulders because it presents images elegantly and allows for slideshow functionality.

More recently I have had to extend the functionality of Lightbox in 2 ways:

1. Add functionality that resizes the Lightbox overlay if the image presented is larger than the initial overlay dimensions
2. Add functionality that allows users to choose whether to view images at maximum size or half size (this is for users who do not have high Internet speeds)

In this blog I will demonstrate how I have implement this.

Resize the Lightbox overlay if the image is larger than the initial overlay dimensions

This solution is demonstrated at BT Fresca

The Lightbox interface contains a semi-transparent div with an id of ‘jquery-overlay’. The dimensions of the overlay are based on the browser window size as well as the x and y scroll. The problem I experienced was when images being displayed were larger than the jquery-overlay. In the screen shot ‘Lightbox overlay too short’ you can see that the overlay is too short.

To overcome this problem I wrote a function called ‘check_page_height(intImageHeight)’. This function merely calls the lightbox function ‘__getPageSize’ and adjusts the ‘jquery-overlay’ dimensions accordingly. As you will see Opera (in this case version 9.62) required a separate calculation.

Line 265

function check_page_height(intImageHeight){
	//resize overlay if image is bigger than page
	// Get page sizes
	var arrPageSizes = ___getPageSize();
	if ($.browser.opera) {
		body_height=Math.floor(intImageHeight)+Math.floor(arrPageSizes[1])+120;
		$('#jquery-overlay').css({
			width:				arrPageSizes[0],
			height:				body_height
		});
	}
	else {
		$('#jquery-overlay').css({
			width:				arrPageSizes[0],
			height:				arrPageSizes[1]
		});
	}

I called this function twice, once in the function ‘_resize_container_image_box’ just before the lightbox-container-image-box is animated and again in the function ‘_show_image_data’ when the ‘lightbox-image-data-box slides down i.e.

line 300

$('#lightbox-container-image-data-box').slideDown('fast',function(){
           check_page_height(intImageHeight);
});

Be sure to pass the variable intImageHeight to the appropriate Lightbox functions ‘_show_image’ and ‘_show_image_data’ on lines 253, 287, 290, 299 and 300.

Allow users the choice to view images at maximum size or half size

On this Rocklands Boulders page I have 102 photos. Since I am currently working in South Africa slow Internet access is common. I decided that in this case users should have an option for viewing photos at half their size to improve the user experience. I implemented this in Lightbox by:

1. Adding two more properties to the Lightbox settings object namely, ‘multiple_photo_size = false’ and ‘large_image = true’

2. On my web page I set a condition that if the number of images being displayed was greater than 100 the thumbnail link attribute ‘rel’ contained ‘lightbox multiple_photo_size’ as opposed to just ‘lightbox’

3. In the Lightbox function ‘_initialize’ I called my function ‘_check_multiple_photo_size’. This function checks to see if the ‘rel’ attribute contains the string ‘ multiple_photo_size’. If it does then the property ‘ multiple_photo_size’ is set to true i.e.

line 67

function _check_multiple_photo_size(objClicked,jQueryMatchedObj) {
	if (objClicked.getAttribute('rel').search('multiple_photo_size') >= 0) {
		settings.multiple_photo_size = true;
	}
	_start(objClicked,jQueryMatchedObj); // This, in this context, refer to object (link)
                                                               which the user have clicked
	return false;
}

4. In the Lightbox funtion ‘_set_interface’ I append the links for multiple photo sizes to Lightbox interface i.e.

line 150

if (settings.multiple_photo_size == true) {
	$('#lightbox-image-details').prepend('<span style="float:left;" id="photo-size">

        <img src="http://www.rocklandsboulders.com/images/large_image_selected.jpg"
        title="Photos displayed at maximum size"><a href="void(0)" id="small_image">
        <img src="http://www.rocklandsboulders.com/images/small_image_select.jpg"
        title="View photos at half size" alt="View photos at half size" /></a></span>');
}

5. I limited the click area for closing the Lightbox interface so that clicking on my new icons did not close Lightbox i.e.

line 171:

$('#jquery-overlay').click(function() {
	settings.large_image = true;
	_finish();
});

6. You will see that I also reset the ‘large_image’ property to true when the Lightbox interface is closed on line 171, 177 and 424.

7. In the Lightbox function ‘_set_image_to_view’ I set a condition that changed the image src idepending on whether the property ‘large_image’ is set to true or false i.e.

line 223

//adjust image src depending on whether setttings.large_image is true or false
if (settings.large_image == false) {
	imageSrc=settings.imageArray[settings.activeImage][0].split('images');
	imageSrc[1] = imageSrc[1].replace('/', 'images/small_');
	settings.imageArray[settings.activeImage][0] = imageSrc[0]+imageSrc[1];
}
else if (settings.large_image == true && settings.imageArray[settings.activeImage]
[0].search('small_') >= 0){
	settings.imageArray[settings.activeImage][0]
        = settings.imageArray[settings.activeImage][0].replace('small_', '');
}

8. I added the onclick functionality for my new icons i.e.

line 574

function __small_image() {
	$('#small_image').click(function(){
		$('#small_image').unbind();
		settings.large_image = false;
		$('#photo-size').fadeOut('fast', function() {
			$('#photo-size').html('<a href="void(0)" id="large_image">
<img src="http://www.rocklandsboulders.com/images/large_image_select.jpg"
title="View photos at maximum size" alt="View photos at maximum size" />
</a><img src="http://www.rocklandsboulders.com/images/small_image_selected.jpg"
title="Photos displayed at half size">');
				$('#photo-size').fadeIn('fast', function () {;
					__large_image();
					_set_image_to_view();
				});
			});
			return false;
	});
}

function __large_image() {
	$('#large_image').click(function(){
		$('#large_image').unbind();
		settings.large_image = true;
		$('#photo-size').fadeOut('fast', function() {
			$('#large_image').remove();
			$('#photo-size').html('

<img src="http://www.rocklandsboulders.com/images/large_image_selected.jpg"
title="Photos displayed at maximum size" alt="Photos displayed at maximum size" /> </a>
<a href="void(0)" id="small_image">
<img src="http://www.rocklandsboulders.com/images/small_image_select.jpg"
title="View photos at half size">');
				$('#photo-size').fadeIn('fast', function () {;
					__small_image();
					_set_image_to_view();
				});
		});
		return false;
	});
}

9. And finally I called my function ‘__small_image’ on line 198 when the Lightbox interface is set.

Screenshots:

• 

Make your comment

* Full name

* Email

* Comment enter your comment

* Captcha

* denotes required fields