/**
* jquery lightbox plugin
* this jquery plugin was inspired and based on lightbox 2 by lokesh dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jquery.
* @name jquery-lightbox-0.5.js
* @author leandro vieira pinho - http://leandrovieira.com
* @version 0.5
* @date april 11, 2008
* @category jquery plugin
* @copyright (c) 2008 leandro vieira pinho (leandrovieira.com)
* @license ccattribution-sharealike 2.5 brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_us
* @example visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jquery plugin
*/
// offering a custom alias suport - more info: http://docs.jquery.com/plugins/authoring#custom_alias
(function($) {
/**
* $ is an alias to jquery object
*
*/
$.fn.lightbox = function(settings) {
// settings to configure the jquery lightbox plugin how you like
settings = jquery.extend({
// configuration related to overlay
overlaybgcolor: '#000', // (string) background color to overlay; inform a hexadecimal value like: #rrggbb. where rr, gg, and bb are the hexadecimal values for the red, green, and blue values of the color.
overlayopacity: 0.8, // (integer) opacity value to overlay; inform: 0.x. where x are number from 0 to 9
// configuration related to navigation
fixednavigation: false, // (boolean) boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
// configuration related to images
imageloading: '/images/lightbox-ico-loading.gif', // (string) path and the name of the loading icon
imagebtnprev: '/images/lightbox-btn-prev.gif', // (string) path and the name of the prev button image
imagebtnnext: '/images/lightbox-btn-next.gif', // (string) path and the name of the next button image
imagebtnclose: '/images/lightbox-btn-close.gif', // (string) path and the name of the close btn
imageblank: '/images/lightbox-blank.gif', // (string) path and the name of a blank image (one pixel)
// configuration related to container image box
containerbordersize: 10, // (integer) if you adjust the padding in the css for the container, #lightbox-container-image-box, you will need to update this value
containerresizespeed: 400, // (integer) specify the resize duration of container image. these number are miliseconds. 400 is default.
// configuration related to texts in caption. for example: image 2 of 8. you can alter either "image" and "of" texts.
txtimage: 'image', // (string) specify text "image"
txtof: 'of', // (string) specify text "of"
// configuration related to keyboard navigation
keytoclose: 'c', // (string) (c = close) letter to close the jquery lightbox interface. beyond this letter, the letter x and the scape key is used to.
keytoprev: 'p', // (string) (p = previous) letter to show the previous image
keytonext: 'n', // (string) (n = next) letter to show the next image.
// don磘 alter these variables in any way
imagearray: [],
activeimage: 0
},settings);
// caching the jquery object with all elements matched
var jquerymatchedobj = this; // this, in this context, refer to jquery object
/**
* initializing the plugin calling the start function
*
* @return boolean false
*/
function _initialize() {
_start(this,jquerymatchedobj); // this, in this context, refer to object (link) which the user have clicked
return false; // avoid the browser following the link
}
/**
* start the jquery lightbox plugin
*
* @param object objclicked the object (link) whick the user have clicked
* @param object jquerymatchedobj the jquery object with all elements matched
*/
function _start(objclicked,jquerymatchedobj) {
// hime some elements to avoid conflict with overlay in ie. these elements appear above the overlay.
$('embed, object, select').css({ 'visibility' : 'hidden' });
// call the function to create the markup structure; style some elements; assign events in some elements.
_set_interface();
// unset total images in imagearray
settings.imagearray.length = 0;
// unset image active information
settings.activeimage = 0;
// we have an image set? or just an image? let磗 see it.
if ( jquerymatchedobj.length == 1 ) {
if(objclicked.getattribute('showpic')!="false")
settings.imagearray.push(new array(objclicked.getattribute('href'),objclicked.getattribute('title')));
} else {
// add an array (as many as we have), with href and title atributes, inside the array that storage the images references
for ( var i = 0; i < jquerymatchedobj.length; i++ ) {
if(jquerymatchedobj[i].getattribute('showpic')!="false")
settings.imagearray.push(new array(jquerymatchedobj[i].getattribute('href'),jquerymatchedobj[i].getattribute('title')));
}
}
while ( settings.imagearray[settings.activeimage][0] != objclicked.getattribute('href') ) {
settings.activeimage++;
}
// call the function that prepares image exibition
_set_image_to_view();
}
/**
* create the jquery lightbox plugin interface
*
* the html markup will be like that:
*
*/
function _set_interface() {
// apply the html markup into body tag
$('body').append('');
// get page sizes
var arrpagesizes = ___getpagesize();
// style overlay and show it
$('#jquery-overlay').css({
backgroundcolor: settings.overlaybgcolor,
opacity: settings.overlayopacity,
width: arrpagesizes[0],
height: arrpagesizes[1]
}).fadein();
// get page scroll
var arrpagescroll = ___getpagescroll();
// calculate top and left offset for the jquery-lightbox div object and show it
$('#jquery-lightbox').css({
top: arrpagescroll[1] + (arrpagesizes[3] / 10),
left: arrpagescroll[0]
}).show();
// assigning click events in elements to close overlay
$('#jquery-overlay,#jquery-lightbox').click(function() {
_finish();
});
// assign the _finish function to lightbox-loading-link and lightbox-secnav-btnclose objects
$('#lightbox-loading-link,#lightbox-secnav-btnclose').click(function() {
_finish();
return false;
});
// if window was resized, calculate the new overlay dimensions
$(window).resize(function() {
// get page sizes
var arrpagesizes = ___getpagesize();
// style overlay and show it
$('#jquery-overlay').css({
width: arrpagesizes[0],
height: arrpagesizes[1]
});
// get page scroll
var arrpagescroll = ___getpagescroll();
// calculate top and left offset for the jquery-lightbox div object and show it
$('#jquery-lightbox').css({
top: arrpagescroll[1] + (arrpagesizes[3] / 10),
left: arrpagescroll[0]
});
});
}
/**
* prepares image exibition; doing a image磗 preloader to calculate it磗 size
*
*/
function _set_image_to_view() { // show the loading
// show the loading
$('#lightbox-loading').show();
if ( settings.fixednavigation ) {
$('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentnumber').hide();
} else {
// hide some elements
$('#lightbox-image,#lightbox-nav,#lightbox-nav-btnprev,#lightbox-nav-btnnext,#lightbox-container-image-data-box,#lightbox-image-details-currentnumber').hide();
}
// image preload process
var objimagepreloader = new image();
objimagepreloader.onload = function() {
$('#lightbox-image').attr('src',settings.imagearray[settings.activeimage][0]);
// perfomance an effect in the image container resizing it
_resize_container_image_box(objimagepreloader.width,objimagepreloader.height);
// clear onload, ie behaves irratically with animated gifs otherwise
objimagepreloader.onload=function(){};
};
objimagepreloader.src = settings.imagearray[settings.activeimage][0];
};
/**
* perfomance an effect in the image container resizing it
*
* @param integer intimagewidth the image磗 width that will be showed
* @param integer intimageheight the image磗 height that will be showed
*/
function _resize_container_image_box(intimagewidth,intimageheight) {
// get current width and height
var intcurrentwidth = $('#lightbox-container-image-box').width();
var intcurrentheight = $('#lightbox-container-image-box').height();
// get the width and height of the selected image plus the padding
var intwidth = (intimagewidth + (settings.containerbordersize * 2)); // plus the image磗 width and the left and right padding value
var intheight = (intimageheight + (settings.containerbordersize * 2)); // plus the image磗 height and the left and right padding value
// diferences
var intdiffw = intcurrentwidth - intwidth;
var intdiffh = intcurrentheight - intheight;
intwidth=intwidth<200?200:intwidth;
// perfomance the effect
$('#lightbox-container-image-box').animate({ width:intwidth , height: intheight },settings.containerresizespeed,function() { _show_image(); });
if ( ( intdiffw == 0 ) && ( intdiffh == 0 ) ) {
if ( $.browser.msie ) {
___pause(250);
} else {
___pause(100);
}
}
$('#lightbox-container-image-data-box').css({ width: intwidth});
$('#tdbox').css({ width: intimagewidth<200?180: intimagewidth});
$('#lightbox-nav-btnprev,#lightbox-nav-btnnext').css({ height: intimageheight + (settings.containerbordersize * 2) });
};
/**
* show the prepared image
*
*/
function _show_image() {
$('#lightbox-loading').hide();
$('#lightbox-image').fadein(function() {
_show_image_data();
_set_navigation();
});
_preload_neighbor_images();
};
/**
* show the image information
*
*/
function _show_image_data() {
$('#lightbox-container-image-data-box').slidedown('fast');
$('#lightbox-image-details-caption').hide();
if ( settings.imagearray[settings.activeimage][1] ) {
$('#lightbox-image-details-caption').html(settings.imagearray[settings.activeimage][1]).show();
}
// if we have a image set, display 'image x of x'
if ( settings.imagearray.length > 1 ) {
$('#lightbox-image-details-currentnumber').html(settings.txtimage + ' ' + ( settings.activeimage + 1 ) + ' ' + settings.txtof + ' ' + settings.imagearray.length).show();
}
}
/**
* display the button navigations
*
*/
function _set_navigation() {
$('#lightbox-nav').show();
// instead to define this configuration in css file, we define here. and it磗 need to ie. just.
$('#lightbox-nav-btnprev,#lightbox-nav-btnnext').css({ 'background' : 'transparent url(' + settings.imageblank + ') no-repeat' });
// show the prev button, if not the first image in set
if ( settings.activeimage != 0 ) {
if ( settings.fixednavigation ) {
$('#lightbox-nav-btnprev').css({ 'background' : 'url(' + settings.imagebtnprev + ') left 15% no-repeat' })
.unbind()
.bind('click',function() {
settings.activeimage = settings.activeimage - 1;
_set_image_to_view();
return false;
});
} else {
// show the images button for next buttons
$('#lightbox-nav-btnprev').unbind().hover(function() {
$(this).css({ 'background' : 'url(' + settings.imagebtnprev + ') left 15% no-repeat' });
},function() {
$(this).css({ 'background' : 'transparent url(' + settings.imageblank + ') no-repeat' });
}).show().bind('click',function() {
settings.activeimage = settings.activeimage - 1;
_set_image_to_view();
return false;
});
}
}
// show the next button, if not the last image in set
if ( settings.activeimage != ( settings.imagearray.length -1 ) ) {
if ( settings.fixednavigation ) {
$('#lightbox-nav-btnnext').css({ 'background' : 'url(' + settings.imagebtnnext + ') right 15% no-repeat' })
.unbind()
.bind('click',function() {
settings.activeimage = settings.activeimage + 1;
_set_image_to_view();
return false;
});
} else {
// show the images button for next buttons
$('#lightbox-nav-btnnext').unbind().hover(function() {
$(this).css({ 'background' : 'url(' + settings.imagebtnnext + ') right 15% no-repeat' });
},function() {
$(this).css({ 'background' : 'transparent url(' + settings.imageblank + ') no-repeat' });
}).show().bind('click',function() {
settings.activeimage = settings.activeimage + 1;
_set_image_to_view();
return false;
});
}
}
// enable keyboard navigation
_enable_keyboard_navigation();
}
/**
* enable a support to keyboard navigation
*
*/
function _enable_keyboard_navigation() {
$(document).keydown(function(objevent) {
_keyboard_action(objevent);
});
}
/**
* disable the support to keyboard navigation
*
*/
function _disable_keyboard_navigation() {
$(document).unbind();
}
/**
* perform the keyboard actions
*
*/
function _keyboard_action(objevent) {
// to ie
if ( objevent == null ) {
keycode = event.keycode;
escapekey = 27;
// to mozilla
} else {
keycode = objevent.keycode;
escapekey = objevent.dom_vk_escape;
}
// get the key in lower case form
key = string.fromcharcode(keycode).tolowercase();
// verify the keys to close the ligthbox
if ( ( key == settings.keytoclose ) || ( key == 'x' ) || ( keycode == escapekey ) ) {
_finish();
}
// verify the key to show the previous image
if ( ( key == settings.keytoprev ) || ( keycode == 37 ) ) {
// if we磖e not showing the first image, call the previous
if ( settings.activeimage != 0 ) {
settings.activeimage = settings.activeimage - 1;
_set_image_to_view();
_disable_keyboard_navigation();
}
}
// verify the key to show the next image
if ( ( key == settings.keytonext ) || ( keycode == 39 ) ) {
// if we磖e not showing the last image, call the next
if ( settings.activeimage != ( settings.imagearray.length - 1 ) ) {
settings.activeimage = settings.activeimage + 1;
_set_image_to_view();
_disable_keyboard_navigation();
}
}
}
/**
* preload prev and next images being showed
*
*/
function _preload_neighbor_images() {
if ( (settings.imagearray.length -1) > settings.activeimage ) {
objnext = new image();
objnext.src = settings.imagearray[settings.activeimage + 1][0];
}
if ( settings.activeimage > 0 ) {
objprev = new image();
objprev.src = settings.imagearray[settings.activeimage -1][0];
}
}
/**
* remove jquery lightbox plugin html markup
*
*/
function _finish() {
$('#jquery-lightbox').remove();
$('#jquery-overlay').fadeout(function() { $('#jquery-overlay').remove(); });
// show some elements to avoid conflict with overlay in ie. these elements appear above the overlay.
$('embed, object, select').css({ 'visibility' : 'visible' });
}
/**
/ third function
* getpagesize() by quirksmode.com
*
* @return array return an array with page width, height and window width, height
*/
function ___getpagesize() {
var xscroll, yscroll;
if (window.innerheight && window.scrollmaxy) {
xscroll = window.innerwidth + window.scrollmaxx;
yscroll = window.innerheight + window.scrollmaxy;
} else if (document.body.scrollheight > document.body.offsetheight){ // all but explorer mac
xscroll = document.body.scrollwidth;
yscroll = document.body.scrollheight;
} else { // explorer mac...would also work in explorer 6 strict, mozilla and safari
xscroll = document.body.offsetwidth;
yscroll = document.body.offsetheight;
}
var windowwidth, windowheight;
if (self.innerheight) { // all except explorer
if(document.documentelement.clientwidth){
windowwidth = document.documentelement.clientwidth;
} else {
windowwidth = self.innerwidth;
}
windowheight = self.innerheight;
} else if (document.documentelement && document.documentelement.clientheight) { // explorer 6 strict mode
windowwidth = document.documentelement.clientwidth;
windowheight = document.documentelement.clientheight;
} else if (document.body) { // other explorers
windowwidth = document.body.clientwidth;
windowheight = document.body.clientheight;
}
// for small pages with total height less then height of the viewport
if(yscroll < windowheight){
pageheight = windowheight;
} else {
pageheight = yscroll;
}
// for small pages with total width less then width of the viewport
if(xscroll < windowwidth){
pagewidth = xscroll;
} else {
pagewidth = windowwidth;
}
arraypagesize = new array(pagewidth,pageheight,windowwidth,windowheight);
return arraypagesize;
};
/**
/ third function
* getpagescroll() by quirksmode.com
*
* @return array return an array with x,y page scroll values.
*/
function ___getpagescroll() {
var xscroll, yscroll;
if (self.pageyoffset) {
yscroll = self.pageyoffset;
xscroll = self.pagexoffset;
} else if (document.documentelement && document.documentelement.scrolltop) { // explorer 6 strict
yscroll = document.documentelement.scrolltop;
xscroll = document.documentelement.scrollleft;
} else if (document.body) {// all other explorers
yscroll = document.body.scrolltop;
xscroll = document.body.scrollleft;
}
arraypagescroll = new array(xscroll,yscroll);
return arraypagescroll;
};
/**
* stop the code execution from a escified time in milisecond
*
*/
function ___pause(ms) {
var date = new date();
curdate = null;
do { var curdate = new date(); }
while ( curdate - date < ms);
};
// return the jquery object for chaining. the unbind method is used to avoid click conflict when the plugin is called more than once
return this.unbind('click').click(_initialize);
};
})(jquery); // call and execute the function immediately passing the jquery object
