Lightbox customization (PHP programming tips)

Web development | Posted: October 7th, 2008 | admin
Tags: code, image gallery, Lightbox, php, Programming PHP, source code, Web development

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. Creat the lightbox_override.css in the styles folder and place in it the next code snippet:

[source='php']
#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;}
[/source]

2. Creat the lightbox_override.js in the ‘js’ folder and place in it the next code snippet:
[source='php']
/**
* 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();
};
[/source]

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

3. Include the standard litebox files:

[source='php']

[/source]

4. Include the ‘css’ customization:

[source='php']

[/source]

5. Include the java script logic customization:

[source='php']

[/source]

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