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