Free Quote
Blog

Lightbox customization (PHP programming tips)

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.
  • Mar 10th, 2009 at 3:04 pm
    IcT

    Hi ! thanx for this customization man !!!

  • Apr 2nd, 2009 at 10:13 pm
    MPJ

    Great, just the kind of think I was looking for! I have the layout of all these smaller lightboxes but don’t like the size or functionality of some of the other lightboxes. Would it be much different to do with Slimbox?

Leave a Comment
Your email will not be published