Customizing LightBox

Overview

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

The biggest advantage is this is working on the top of prototype that which is used in most of the applications. So lightbox is just a piece of script using this framework.
To create the 'shadow' effect over the page, we need to use a PNG file and some extra CSS with the original version of lightbox from Lokesh Dharkar (http://www.huddletogether.com/projects/lightbox/)

Dhakar’s method, however, while fantastic, was a bit too specific for major purposes and so Chris Campbell created an implementation which is a bit more flexible for extending a web site’s interface. This document covers how to create a cutom modal window by extending LighBox.

For more details please refer to http://particletree.com/features/lightbox-gone-wild/



Implementation Steps

The current js folder already includes all the necessary js so it’s just a matter to implement it.

1) Make sure prototype scripts are included in the page

All the prototype js are included

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



2) Include lightbox script.


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


These scripts are the base scripts to display lightbox.


3) Extend the script to create Our functionality
By default lightbox only comes with the script which displays lightbox when we clicks on a particular link. Most of the cases we need a functionality like it should get displayed when we calls a javascript function. The function should also take a filename which it should displays in the box. Following is the sample code done which extended lightbox.




<script type="text/javascript">
/* - - - - - - - - - - - - - - - - - - - - -
Title : Customized Lightbox Extended Script
- - - - - - - - - - - - - - - - - - - - - */
// subclassing the standard LightBox for adding additonal user defined methods
var CustomLightBox = Class.create(lightbox, {
// add the empty constructor
initialize: function() {
},

clickOk: function()
{
alert(“I’m in OK”);
},

clickCancel: function(){
document.location.href = "/jsp/shoppingCart/shoppingCart.jsp"
this.deactivate();
}
});
// trigger the display of LightBox pass the jsp/html file to display within
function displayModalBox(fileName){
addLightboxMarkup();
var myLightbox = new CustomLightBox ();
myLightbox.content = fileName;
myLightbox.activate();
}
</script>





“displayModalBox(fileName)” is the function which we need to call to display lightbox. filename is the jsp or html page which gets displayed within the lightbox. Copy this script and modify for the purpose we need.


4) Map the custom functions to the links

clickOk & clickCancel are the extended methods or custom fucntions to invoke when user clicks a link inside the displaybox. However we need to map the links to these methods.

for eg:-


<a href="#" class="lbAction" rel="clickOk"><input type="button" value="<c:out value='${continue}'/>" class="submitbtn"></a>
<a href="#" class="lbAction" rel="clickCancel"><input type="button" value="<c:out value='${cancel}'/>" class="submitbtn"></a>




The only thing we need to take care is the class it should be lbAction for the link.