// 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/loading.gif', // (string) path and the name of the loading icon
imagebtnprev: 'images/lightbox/prevlabel.gif', // (string) path and the name of the prev button image
imagebtnnext: 'images/lightbox/nextlabel.gif', // (string) path and the name of the next button image
imagebtnclose: 'images/lightbox/closelabel.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: '当前', // (string) specify text "image"
txtof: '共有', // (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) {
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++) {
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;
// 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});
$('#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纾杄 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纾杄 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
