2 * jQuery lightBox plugin
\r
3 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
\r
4 * and adapted to me for use like a plugin from jQuery.
\r
5 * @name jquery-lightbox-0.5.js
\r
6 * @author Leandro Vieira Pinho - http://leandrovieira.com
\r
8 * @date April 11, 2008
\r
9 * @category jQuery plugin
\r
10 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
\r
11 * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
\r
12 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
\r
15 // Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias
\r
18 * $ is an alias to jQuery object
\r
21 $.fn.lightBox = function(settings) {
\r
22 // Settings to configure the jQuery lightBox plugin how you like
\r
23 settings = jQuery.extend({
\r
24 // Configuration related to overlay
\r
25 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.
\r
26 overlayOpacity: 0.8, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
\r
27 // Configuration related to navigation
\r
28 fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
\r
29 // Configuration related to images
\r
30 imageLoading: 'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
\r
31 imageBtnPrev: 'images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
\r
32 imageBtnNext: 'images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
\r
33 imageBtnClose: 'images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
\r
34 imageBlank: 'images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
\r
35 // Configuration related to container image box
\r
36 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
\r
37 containerResizeSpeed: 400, // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default.
\r
38 // Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts.
\r
39 txtImage: 'Image', // (string) Specify text "Image"
\r
40 txtOf: 'of', // (string) Specify text "of"
\r
41 // Configuration related to keyboard navigation
\r
42 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.
\r
43 keyToPrev: 'p', // (string) (p = previous) Letter to show the previous image
\r
44 keyToNext: 'n', // (string) (n = next) Letter to show the next image.
\r
45 // Don´t alter these variables in any way
\r
49 // Caching the jQuery object with all elements matched
\r
50 var jQueryMatchedObj = this; // This, in this context, refer to jQuery object
\r
52 * Initializing the plugin calling the start function
\r
54 * @return boolean false
\r
56 function _initialize() {
\r
57 _start(this,jQueryMatchedObj); // This, in this context, refer to object (link) which the user have clicked
\r
58 return false; // Avoid the browser following the link
\r
61 * Start the jQuery lightBox plugin
\r
63 * @param object objClicked The object (link) whick the user have clicked
\r
64 * @param object jQueryMatchedObj The jQuery object with all elements matched
\r
66 function _start(objClicked,jQueryMatchedObj) {
\r
67 // Hime some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
\r
68 $('embed, object, select').css({ 'visibility' : 'hidden' });
\r
69 // Call the function to create the markup structure; style some elements; assign events in some elements.
\r
71 // Unset total images in imageArray
\r
72 settings.imageArray.length = 0;
\r
73 // Unset image active information
\r
74 settings.activeImage = 0;
\r
75 // We have an image set? Or just an image? Let´s see it.
\r
76 if ( jQueryMatchedObj.length == 1 ) {
\r
77 settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));
\r
79 // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
\r
80 for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
\r
81 settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
\r
84 while ( settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href') ) {
\r
85 settings.activeImage++;
\r
87 // Call the function that prepares image exibition
\r
88 _set_image_to_view();
\r
91 * Create the jQuery lightBox plugin interface
\r
93 * The HTML markup will be like that:
\r
94 <div id="jquery-overlay"></div>
\r
95 <div id="jquery-lightbox">
\r
96 <div id="lightbox-container-image-box">
\r
97 <div id="lightbox-container-image">
\r
98 <img src="../fotos/XX.jpg" id="lightbox-image">
\r
99 <div id="lightbox-nav">
\r
100 <a href="#" id="lightbox-nav-btnPrev"></a>
\r
101 <a href="#" id="lightbox-nav-btnNext"></a>
\r
103 <div id="lightbox-loading">
\r
104 <a href="#" id="lightbox-loading-link">
\r
105 <img src="../images/lightbox-ico-loading.gif">
\r
110 <div id="lightbox-container-image-data-box">
\r
111 <div id="lightbox-container-image-data">
\r
112 <div id="lightbox-image-details">
\r
113 <span id="lightbox-image-details-caption"></span>
\r
114 <span id="lightbox-image-details-currentNumber"></span>
\r
116 <div id="lightbox-secNav">
\r
117 <a href="#" id="lightbox-secNav-btnClose">
\r
118 <img src="../images/lightbox-btn-close.gif">
\r
126 function _set_interface() {
\r
127 // Apply the HTML markup into body tag
\r
128 $('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');
\r
130 var arrPageSizes = ___getPageSize();
\r
131 // Style overlay and show it
\r
132 $('#jquery-overlay').css({
\r
133 backgroundColor: settings.overlayBgColor,
\r
134 opacity: settings.overlayOpacity,
\r
135 width: arrPageSizes[0],
\r
136 height: arrPageSizes[1]
\r
139 var arrPageScroll = ___getPageScroll();
\r
140 // Calculate top and left offset for the jquery-lightbox div object and show it
\r
141 $('#jquery-lightbox').css({
\r
142 top: arrPageScroll[1] + (arrPageSizes[3] / 10),
\r
143 left: arrPageScroll[0]
\r
145 // Assigning click events in elements to close overlay
\r
146 $('#jquery-overlay,#jquery-lightbox').click(function() {
\r
149 // Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
\r
150 $('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
\r
154 // If window was resized, calculate the new overlay dimensions
\r
155 $(window).resize(function() {
\r
157 var arrPageSizes = ___getPageSize();
\r
158 // Style overlay and show it
\r
159 $('#jquery-overlay').css({
\r
160 width: arrPageSizes[0],
\r
161 height: arrPageSizes[1]
\r
164 var arrPageScroll = ___getPageScroll();
\r
165 // Calculate top and left offset for the jquery-lightbox div object and show it
\r
166 $('#jquery-lightbox').css({
\r
167 top: arrPageScroll[1] + (arrPageSizes[3] / 10),
\r
168 left: arrPageScroll[0]
\r
173 * Prepares image exibition; doing a image´s preloader to calculate it´s size
\r
176 function _set_image_to_view() { // show the loading
\r
177 // Show the loading
\r
178 $('#lightbox-loading').show();
\r
179 if ( settings.fixedNavigation ) {
\r
180 $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
\r
182 // Hide some elements
\r
183 $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
\r
185 // Image preload process
\r
186 var objImagePreloader = new Image();
\r
187 objImagePreloader.onload = function() {
\r
188 $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
\r
189 // Perfomance an effect in the image container resizing it
\r
190 _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
\r
191 // clear onLoad, IE behaves irratically with animated gifs otherwise
\r
192 objImagePreloader.onload=function(){};
\r
194 objImagePreloader.src = settings.imageArray[settings.activeImage][0];
\r
197 * Perfomance an effect in the image container resizing it
\r
199 * @param integer intImageWidth The image´s width that will be showed
\r
200 * @param integer intImageHeight The image´s height that will be showed
\r
202 function _resize_container_image_box(intImageWidth,intImageHeight) {
\r
203 // Get current width and height
\r
204 var intCurrentWidth = $('#lightbox-container-image-box').width();
\r
205 var intCurrentHeight = $('#lightbox-container-image-box').height();
\r
206 // Get the width and height of the selected image plus the padding
\r
207 var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image´s width and the left and right padding value
\r
208 var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image´s height and the left and right padding value
\r
210 var intDiffW = intCurrentWidth - intWidth;
\r
211 var intDiffH = intCurrentHeight - intHeight;
\r
212 // Perfomance the effect
\r
213 $('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
\r
214 if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
\r
215 if ( $.browser.msie ) {
\r
221 $('#lightbox-container-image-data-box').css({ width: intImageWidth });
\r
222 $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
\r
225 * Show the prepared image
\r
228 function _show_image() {
\r
229 $('#lightbox-loading').hide();
\r
230 $('#lightbox-image').fadeIn(function() {
\r
231 _show_image_data();
\r
234 _preload_neighbor_images();
\r
237 * Show the image information
\r
240 function _show_image_data() {
\r
241 $('#lightbox-container-image-data-box').slideDown('fast');
\r
242 $('#lightbox-image-details-caption').hide();
\r
243 if ( settings.imageArray[settings.activeImage][1] ) {
\r
244 $('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();
\r
246 // If we have a image set, display 'Image X of X'
\r
247 if ( settings.imageArray.length > 1 ) {
\r
248 $('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();
\r
252 * Display the button navigations
\r
255 function _set_navigation() {
\r
256 $('#lightbox-nav').show();
\r
258 // Instead to define this configuration in CSS file, we define here. And it´s need to IE. Just.
\r
259 $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
\r
261 // Show the prev button, if not the first image in set
\r
262 if ( settings.activeImage != 0 ) {
\r
263 if ( settings.fixedNavigation ) {
\r
264 $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' })
\r
266 .bind('click',function() {
\r
267 settings.activeImage = settings.activeImage - 1;
\r
268 _set_image_to_view();
\r
272 // Show the images button for Next buttons
\r
273 $('#lightbox-nav-btnPrev').unbind().hover(function() {
\r
274 $(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' });
\r
276 $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
\r
277 }).show().bind('click',function() {
\r
278 settings.activeImage = settings.activeImage - 1;
\r
279 _set_image_to_view();
\r
285 // Show the next button, if not the last image in set
\r
286 if ( settings.activeImage != ( settings.imageArray.length -1 ) ) {
\r
287 if ( settings.fixedNavigation ) {
\r
288 $('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' })
\r
290 .bind('click',function() {
\r
291 settings.activeImage = settings.activeImage + 1;
\r
292 _set_image_to_view();
\r
296 // Show the images button for Next buttons
\r
297 $('#lightbox-nav-btnNext').unbind().hover(function() {
\r
298 $(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' });
\r
300 $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
\r
301 }).show().bind('click',function() {
\r
302 settings.activeImage = settings.activeImage + 1;
\r
303 _set_image_to_view();
\r
308 // Enable keyboard navigation
\r
309 _enable_keyboard_navigation();
\r
312 * Enable a support to keyboard navigation
\r
315 function _enable_keyboard_navigation() {
\r
316 $(document).keydown(function(objEvent) {
\r
317 _keyboard_action(objEvent);
\r
321 * Disable the support to keyboard navigation
\r
324 function _disable_keyboard_navigation() {
\r
325 $(document).unbind();
\r
328 * Perform the keyboard actions
\r
331 function _keyboard_action(objEvent) {
\r
333 if ( objEvent == null ) {
\r
334 keycode = event.keyCode;
\r
338 keycode = objEvent.keyCode;
\r
339 escapeKey = objEvent.DOM_VK_ESCAPE;
\r
341 // Get the key in lower case form
\r
342 key = String.fromCharCode(keycode).toLowerCase();
\r
343 // Verify the keys to close the ligthBox
\r
344 if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey ) ) {
\r
347 // Verify the key to show the previous image
\r
348 if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) {
\r
349 // If we´re not showing the first image, call the previous
\r
350 if ( settings.activeImage != 0 ) {
\r
351 settings.activeImage = settings.activeImage - 1;
\r
352 _set_image_to_view();
\r
353 _disable_keyboard_navigation();
\r
356 // Verify the key to show the next image
\r
357 if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) {
\r
358 // If we´re not showing the last image, call the next
\r
359 if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) {
\r
360 settings.activeImage = settings.activeImage + 1;
\r
361 _set_image_to_view();
\r
362 _disable_keyboard_navigation();
\r
367 * Preload prev and next images being showed
\r
370 function _preload_neighbor_images() {
\r
371 if ( (settings.imageArray.length -1) > settings.activeImage ) {
\r
372 objNext = new Image();
\r
373 objNext.src = settings.imageArray[settings.activeImage + 1][0];
\r
375 if ( settings.activeImage > 0 ) {
\r
376 objPrev = new Image();
\r
377 objPrev.src = settings.imageArray[settings.activeImage -1][0];
\r
381 * Remove jQuery lightBox plugin HTML markup
\r
384 function _finish() {
\r
385 $('#jquery-lightbox').remove();
\r
386 $('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); });
\r
387 // Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
\r
388 $('embed, object, select').css({ 'visibility' : 'visible' });
\r
392 * getPageSize() by quirksmode.com
\r
394 * @return Array Return an array with page width, height and window width, height
\r
396 function ___getPageSize() {
\r
397 var xScroll, yScroll;
\r
398 if (window.innerHeight && window.scrollMaxY) {
\r
399 xScroll = window.innerWidth + window.scrollMaxX;
\r
400 yScroll = window.innerHeight + window.scrollMaxY;
\r
401 } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
\r
402 xScroll = document.body.scrollWidth;
\r
403 yScroll = document.body.scrollHeight;
\r
404 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
\r
405 xScroll = document.body.offsetWidth;
\r
406 yScroll = document.body.offsetHeight;
\r
408 var windowWidth, windowHeight;
\r
409 if (self.innerHeight) { // all except Explorer
\r
410 if(document.documentElement.clientWidth){
\r
411 windowWidth = document.documentElement.clientWidth;
\r
413 windowWidth = self.innerWidth;
\r
415 windowHeight = self.innerHeight;
\r
416 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
\r
417 windowWidth = document.documentElement.clientWidth;
\r
418 windowHeight = document.documentElement.clientHeight;
\r
419 } else if (document.body) { // other Explorers
\r
420 windowWidth = document.body.clientWidth;
\r
421 windowHeight = document.body.clientHeight;
\r
423 // for small pages with total height less then height of the viewport
\r
424 if(yScroll < windowHeight){
\r
425 pageHeight = windowHeight;
\r
427 pageHeight = yScroll;
\r
429 // for small pages with total width less then width of the viewport
\r
430 if(xScroll < windowWidth){
\r
431 pageWidth = xScroll;
\r
433 pageWidth = windowWidth;
\r
435 arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
\r
436 return arrayPageSize;
\r
440 * getPageScroll() by quirksmode.com
\r
442 * @return Array Return an array with x,y page scroll values.
\r
444 function ___getPageScroll() {
\r
445 var xScroll, yScroll;
\r
446 if (self.pageYOffset) {
\r
447 yScroll = self.pageYOffset;
\r
448 xScroll = self.pageXOffset;
\r
449 } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
\r
450 yScroll = document.documentElement.scrollTop;
\r
451 xScroll = document.documentElement.scrollLeft;
\r
452 } else if (document.body) {// all other Explorers
\r
453 yScroll = document.body.scrollTop;
\r
454 xScroll = document.body.scrollLeft;
\r
456 arrayPageScroll = new Array(xScroll,yScroll);
\r
457 return arrayPageScroll;
\r
460 * Stop the code execution from a escified time in milisecond
\r
463 function ___pause(ms) {
\r
464 var date = new Date();
\r
466 do { var curDate = new Date(); }
\r
467 while ( curDate - date < ms);
\r
469 // Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once
\r
470 return this.unbind('click').click(_initialize);
\r
472 })(jQuery); // Call and execute the function immediately passing the jQuery object