Lightbox customization (PHP programming tips)

October 7, 2008

Current version of Lightbox (widely used in web development) has an intricate navigation in the image gallery. At first a user trys to guess where to show “previous” or “next” buttons.

This navigation isn’t user friendly. Here are some small modifications for creating a simple navigation:

The best way for creating it in your image gallery is overriding the code without direct changes in the lightbox source code. It’s profitable when it is necessary to update the source code.

Note: In the examples we were using lightbox2.04 in folder lightbox, the folder with the names of styles for containing css styles and the folder with the name ‘js’ for containing the java script code.

1. Create the lightbox_override.css in the styles folder and place in it the next code snippet:

#hoverNav{ height: 40px; width: 100%; z-index: 10;}
#hoverNav a{ outline: none; text-align:center }

/* change height for next and previous link */
#prevLink, #nextLink{ width: 60px; height: 40px !important; background-image: url(data:image/gif;base64,AAAA); display: block; }
#prevLink, #prevLink:hover, #prevLink:visited:hover { background: url(/lightbox/images/prevlabel.gif) left 15% no-repeat;}
#nextLink, #nextLink:hover, #nextLink:visited:hover { background: url(/lightbox/images/nextlabel.gif) right 15% no-repeat;}

/* change image data container height */
#imageDataContainer{ height:40px;font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ color: #666; }
#imageData #imageDetails{ text-align: center; padding-left:60px; padding-right:60px}
#imageData #numberDisplay{ }
#imageContainer #bottomNavClose{ position:absolute; float: right;  padding-top:2px; width: 17px; right: 10px;outline: none;}

2. Create the lightbox_override.js in the ‘js’ folder and place in it the next code snippet:

/**
* Override lightbox initialization.
*
*/
Lightbox.prototype.initialize = function() {

this.updateImageList();

this.keyboardAction = this.keyboardAction.bindAsEventListener(this);

if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1)  LightboxOptions.resizeSpeed = 1;

this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // shadow fade in/out duration

var size = (LightboxOptions.animate ? 250 : 1) + 'px';
var objBody = $$('body')[0];

objBody.appendChild(Builder.node('div',{id:'overlay'}));

// Change lightbox html code and place next and previous link to bottom of box
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
Builder.node('div',{id:'outerImageContainer'},
Builder.node('div',{id:'imageContainer'}, [
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
),
Builder.node('img',{id:'lightboxImage'}),
Builder.node('div',{id:'loading'},
Builder.node('a',{id:'loadingLink', href: '#' },
Builder.node('img', {src: LightboxOptions.fileLoadingImage})
)
)
])
),
Builder.node('div', {id:'imageDataContainer'},
Builder.node('div',{id:'imageData'}, [
Builder.node('div',{id:'hoverNav'}, [
Builder.node('a',{id:'prevLink', href: '#' }),
Builder.node('a',{id:'nextLink', href: '#' }),
Builder.node('div',{id:'imageDetails'}, [
Builder.node('div',{id:'caption'}),
Builder.node('span',{id:'numberDisplay'})
])
])
])
)
]));

$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
$('outerImageContainer').setStyle({ width: size, height: size });
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));

var th = this;
(function(){
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id){ th[id] = $(id); });
}).defer();
};

Difference between standard initialization and custom is in changing html element positions.

3. Include the standard litebox files:

<script type="text/javascript" src="/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/lightbox/css/lightbox.css" type="text/css" media="screen"/>

4. Include the ‘css’ customization:

<link rel="stylesheet" href="/styles/lightbox_override.css" type="text/css" media="screen"/>

5. Include the java script logic customization:

<script type="text/javascript" src="/js/lightbox_override.js"></script>

Note: all files included must be located in the head element of the html page.

STAY WITH US

To get your project underway, simply contact us and an expert will get in touch with you as soon as possible.