2 * Thickbox 2.1 - One Box To Rule Them All.
3 * By Cody Lindley (http://www.codylindley.com)
4 * Copyright (c) 2006 cody lindley
5 * Licensed under the MIT License:
6 *http://www.opensource.org/licenses/mit-license.php
7 * Thickbox is built on top of the very light weight jQuery library.
8 * Modified for SPIP <www.spip.net> by Fil <fil@rezo.net>:
9 * Modified by BoOz@rezo.net
10 * - added recognition of images based on a.type
11 * - added an image gallery
12 * - added keyboard navigation ('n'ext (->), 'p'revious (<-), 'q'uit (esc))
13 * - customize path to the css and wheel image
14 * - default size for thickbox links that have no width x height indicated ??
15 * - don't load css when not needed ??
16 * - TODO: don't load js when not needed!!
21 //on page load call TB_init
25 var DELAI
= 7000 ; //nombre de secondes entre deux images
30 if(typeof TB_chemin_css
== 'undefined') { TB_chemin_css
= 'thickbox.css'; }
31 if(typeof TB_chemin_animation
== 'undefined') { TB_chemin_animation
= 'circle_animation.gif'; }
32 //add thickbox to href elements that have a class of .thickbox
35 var t
= this.title
|| this.name
;
36 var longdesc
= jQuery('img[longdesc]', this).attr('longdesc');
41 TB_show(t
,this.href
,'image');
46 //add thickbox to href elements that have a class of .thickbox
47 function TB_init(root
) {
48 jQuery("a.thickbox",root
).each(
50 this.onclick
= TB_image
;
51 var t
= this.alt
|| this.name
|| null;
52 this.alt
= t
+ " - view bigger version";
54 (this.type
&& this.type
.match(/^image[\/](jpeg|gif|png)$/i))
55 || (this.href
&& this.href
.match(/\.(jpeg|jpg|png|gif)$/i))
57 // we store image links in an array (for a gallery)
60 this.title
|| this.name
66 //console.log(imageArray);
69 function TB_show(caption
, url
) {//function called when the user clicks on a thickbox link
71 if (document
.getElementById("TB_HideSelect") == null) {
72 jQuery("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay' title='Fermer'></div><div id='TB_window'></div>");
73 jQuery("#TB_overlay").click(TB_remove
);
75 jQuery(".TB_hide").hide();
77 if(caption
==null){caption
=""};
80 jQuery(window
).scroll(TB_position
);
85 jQuery("body").append("<div id='TB_load'><img src='"+TB_chemin_animation
+"' alt='loading' /></div>");
88 if(url
.indexOf("?")!==-1){ //If there is a query string involved
89 var baseURL
= url
.substr(0, url
.indexOf("?"));
93 var urlString
= /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;
94 var urlType
= baseURL
.toLowerCase().match(urlString
);
96 if(urlType
== '.jpg' || urlType
== '.jpeg' || urlType
== '.png' || urlType
== '.gif' || urlType
== '.bmp'){//code to show images
108 if(imageArray
.length
> 0){
109 TB_TempArray
= imageArray
;
110 for (TB_Counter
= 0; ((TB_Counter
< TB_TempArray
.length
) && (TB_NextHTML
== "")); TB_Counter
++) {
111 var urlTypeTemp
= TB_TempArray
[TB_Counter
][0].toLowerCase().match(urlString
);
112 if (!(TB_TempArray
[TB_Counter
][0] == url
)) {
114 TB_NextCaption
= TB_TempArray
[TB_Counter
][1];
115 TB_NextURL
= TB_TempArray
[TB_Counter
][0];
116 TB_NextHTML
= "<span id='TB_next'> <a href='#' title='Image suivante'><strong> ></strong></a></span>";
118 TB_PrevCaption
= TB_TempArray
[TB_Counter
][1];
119 TB_PrevURL
= TB_TempArray
[TB_Counter
][0];
120 TB_PrevHTML
= "<span id='TB_prev'> <a href='#' title='Image precedente'><strong>< </strong></a></span>";
124 TB_imageCount
=(TB_Counter
+ 1) +" / "+ (TB_TempArray
.length
);
128 if (!(TB_NextHTML
== "")) { //preload de la prochaine image
129 imageSuivante
= new Image();
130 imageSuivante
.src
= TB_NextURL
;
133 imgPreloader
= new Image();
134 imgPreloader
.onload = function(){
135 imgPreloader
.onload
= null;
136 //console.log("loaded" + url);
137 // Resizing large images - orginal by Christian Montoya edited by me.
138 TB_Big_Image
= false ;
139 var pagesize
= TB_getPageSize();
140 var x
= pagesize
[0] - 150;
141 var y
= pagesize
[1] - 150;
142 var imageWidth
= imgPreloader
.width
;
143 var imageHeight
= imgPreloader
.height
;
144 IMAGE_WIDTH
= imageWidth
;
145 IMAGE_HEIGHT
= imageHeight
;
147 if (imageWidth
> x
) {
148 TB_Big_Image
= true ;
149 imageHeight
= imageHeight
* (x
/ imageWidth
);
152 if (imageHeight
> y
) {
153 TB_Big_Image
= true ;
154 imageWidth
= imageWidth
* (y
/ imageHeight
);
157 } else if (imageHeight
> y
) {
158 TB_Big_Image
= true ;
159 imageWidth
= imageWidth
* (y
/ imageHeight
);
162 if (imageWidth
> x
) {
163 TB_Big_Image
= true ;
164 imageHeight
= imageHeight
* (x
/ imageWidth
);
170 TB_Diapo
= "<span id='TB_Diapo'> <a href='#'><strong>[Diaporama]</strong></a></span>";
172 TB_Diapo
= "<span id='TB_Diapo'> <a href='#' title='Stop'><strong>[Stop]</strong></a></span>";
175 TB_Full_Size
= "<span id='TB_Full'> <a href='#'><strong>[Zoom]</strong></a></span>";
176 TB_WIDTH
= imageWidth
+ 20;
177 TB_HEIGHT
= imageHeight
+ 20;
179 jQuery("#TB_window").append("<a href='#' id='TB_ImageOff'><img id='TB_Image' src='"+url
+"' width='"+imageWidth
+"' height='"+imageHeight
+"' alt='"+caption
+" - next picture'/></a>" + "<div id='TB_legend' style='background-color:#fff'><div id='TB_caption'>"+caption
+"</div><div id='TB_secondLine'>" + TB_imageCount
+ TB_Full_Size
+ TB_PrevHTML
+ TB_NextHTML
+ TB_Diapo
+"</div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'><img src='"+TB_chemin_close
+"' alt='Fermer' /></a></div></div>");
181 jQuery("#TB_closeWindowButton").click(TB_remove
);
182 jQuery("#TB_load").remove();
183 jQuery("#TB_window").fadeIn("slow");
184 //setTimeout('jQuery("#TB_legend").slideDown(800);',1600);
186 if (!(TB_NextHTML
== "")) {
189 jQuery("#TB_window").remove();
190 jQuery("body").append("<div id='TB_window'></div>");
191 TB_show(TB_NextCaption
, TB_NextURL
);
194 jQuery("#TB_next").click(goNext
);
197 if (!(TB_PrevHTML
== "")) {
200 if(jQuery(document
).unbind('click',goPrev
)){jQuery(document
).unbind('click',goPrev
)};
201 jQuery("#TB_window").remove();
202 jQuery("body").append("<div id='TB_window'></div>");
203 TB_show(TB_PrevCaption
, TB_PrevURL
);
206 jQuery("#TB_prev").click(goPrev
);
209 if (!(TB_Full_Size
== "")) {
211 var arrayPageScroll
= TB_getPageScrollTop();
212 var pagesize
= TB_getPageSize();
216 TB_TOP
= arrayPageScroll
[1];
218 if( (arrayPageScroll
[0] + (pagesize
[0] - IMAGE_WIDTH
)/2) > 0 ){
219 TB_LEFT
= arrayPageScroll
[0] + (pagesize
[0] - IMAGE_WIDTH
)/2 ;
224 jQuery("#TB_window").animate({top
:TB_TOP
,left
:TB_LEFT
,width
:(IMAGE_WIDTH
+20),height
:(IMAGE_HEIGHT
+20)},1500);
225 jQuery("#TB_Image").animate({top
:20,left
:20,width
:IMAGE_WIDTH
,height
:IMAGE_HEIGHT
},1500, TB_recadre
);
229 jQuery("#TB_window").animate({top
: (arrayPageScroll
[1] + (pagesize
[1]-TB_HEIGHT
)/2),left:(arrayPageScroll[0] + (pagesize[0] - TB_WIDTH)/2), width
:TB_WIDTH
,height
:TB_HEIGHT
},1500);
230 jQuery("#TB_Image").animate({top
:20,left
:20,width
:(TB_WIDTH
- 20),height
:(TB_HEIGHT
- 20)},1500,TB_recadre
);
234 jQuery("#TB_Full").click(fullSize
);
237 if(!(TB_NextHTML
== "")){
238 jQuery("#TB_ImageOff").click(goNext
);
240 jQuery("#TB_ImageOff").click(TB_remove
);
243 jQuery("#TB_Diapo").click(diaporama
);
245 document
.onkeydown = function(e
){
246 if (e
== null) { // ie
247 keycode
= event
.keyCode
;
251 if(keycode
== 27 | keycode
== 67 | keycode
== 70){ // close
253 } else if(keycode
== 190 | keycode
== 39){ // display previous image <-
254 if(!(TB_NextHTML
== "")){
255 document
.onkeydown
= "";
258 } else if(keycode
== 188| keycode
== 37){ // display next image ->
259 if(!(TB_PrevHTML
== "")){
260 document
.onkeydown
= "";
268 jQuery("#TB_load").remove();
269 jQuery("#TB_window").css({display
:"block"}); //for safari using css instead of show
273 //console.log("deb " + DELAI);
275 setTimeout('diapo();',DELAI
);
276 jQuery("#TB_ImageOff")[0].focus();
279 imgPreloader
.src
= url
;
280 //console.log("hop" + url);
282 }else{//code to show html pages
284 var queryString
= url
.replace(/^[^\?]+\?+/,'');
285 //rhooooo, c'est pas du boulot ce thickbox
286 queryString
= queryString
.replace(/^[^\?]+\?+/,'');
287 //console.log(queryString);
288 var params
= TB_parseQuery( queryString
);
289 //console.log(params);
291 TB_WIDTH
= (params
['width']*1) + 30;
292 TB_HEIGHT
= (params
['height']*1) + 40;
294 ajaxContentW
= TB_WIDTH
- 30;
295 ajaxContentH
= TB_HEIGHT
- 45;
297 if(url
.indexOf('TB_iframe') != -1){
298 urlNoQuery
= url
.split('TB_');
299 jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption
+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery
[0]+"' id='TB_iframeContent' name='TB_iframeContent' style='width:"+(ajaxContentW
+ 29)+"px;height:"+(ajaxContentH
+ 17)+"px;' onload='TB_showIframe()'> </iframe>");
301 jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption
+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW
+"px;height:"+ajaxContentH
+"px;'></div>");
304 jQuery("#TB_closeWindowButton").click(TB_remove
);
306 if(url
.indexOf('TB_inline') != -1){
307 jQuery("#TB_ajaxContent").html(jQuery('#' + params
['inlineId']).html());
309 jQuery("#TB_load").remove();
310 jQuery("#TB_window").css({display
:"block"});
311 }else if(url
.indexOf('TB_iframe') != -1){
313 if(frames
['TB_iframeContent'] == undefined){//be nice to safari
314 jQuery("#TB_load").remove();
315 jQuery("#TB_window").css({display
:"block"});
316 jQuery(document
).keyup( function(e
){ var key
= e
.keyCode
; if(key
== 27){TB_remove()} });
319 jQuery("#TB_ajaxContent").load(url
, function(){
321 jQuery("#TB_load").remove();
322 jQuery("#TB_window").css({display
:"block"});
328 jQuery(window
).resize(TB_position
);
330 document
.onkeyup = function(e
){
331 if (e
== null) { // ie
332 keycode
= event
.keyCode
;
337 if(keycode
== 27){ // close
347 //helper functions below
348 function diaporama(){
352 //console.log("deb");
354 //jQuery("TB_secondLine").html(TB_imageCount + TB_Full_Size + TB_PrevHTML + TB_NextHTML + "[Stop]");
362 //console.log(DIAPO);
365 jQuery("#TB_window").remove();
366 jQuery("body").append("<div id='TB_window'></div>");
367 //console.log("hop");
368 TB_show(TB_NextCaption
, TB_NextURL
);
369 }else DIAPO
= false ;
374 function TB_showIframe(){
375 jQuery("#TB_load").remove();
376 jQuery("#TB_window").css({display
:"block"});
379 function TB_remove() {
382 jQuery("#TB_imageOff").unbind('click');
383 jQuery("#TB_overlay").unbind('click');
384 jQuery("#TB_closeWindowButton").unbind('click');
385 jQuery("#TB_window").fadeOut("fast",function(){jQuery('#TB_window,#TB_overlay,#TB_HideSelect').remove();});
386 jQuery("#TB_load").remove();
387 jQuery(".TB_hide").show();
392 function TB_position() {
393 var pagesize
= TB_getPageSize();
394 var arrayPageScroll
= TB_getPageScrollTop();
395 var legendHeight
= jQuery("#TB_legend").height() ;
399 jQuery("#TB_window").animate({top
: (arrayPageScroll
[1] + (pagesize
[1]-TB_HEIGHT
)/2),left:(arrayPageScroll[0] + (pagesize[0] - TB_WIDTH)/2), width
:TB_WIDTH
,height
:TB_HEIGHT
},1500);
400 jQuery("#TB_Image").animate({top
:20,left
:20,width
:(TB_WIDTH
- 20),height
:(TB_HEIGHT
- 20)},1500,TB_recadre
);
403 if(!FULL_S
|| DIAPO
){
404 jQuery("#TB_window").css({width
:TB_WIDTH
+"px",left
: (arrayPageScroll
[0] + (pagesize
[0] - TB_WIDTH
)/2)+"px", top: (arrayPageScroll[1] + (pagesize[1]-TB_HEIGHT)/2 - legendHeight
/2)+"px" });
408 function TB_overlaySize(){
409 if (window
.innerHeight
&& window
.scrollMaxY
|| window
.innerWidth
&& window
.scrollMaxX
) {
410 yScroll
= window
.innerHeight
+ window
.scrollMaxY
;
411 xScroll
= window
.innerWidth
+ window
.scrollMaxX
;
412 var deff
= document
.documentElement
;
413 var wff
= (deff
&&deff
.clientWidth
) || document
.body
.clientWidth
|| window
.innerWidth
|| self
.innerWidth
;
414 var hff
= (deff
&&deff
.clientHeight
) || document
.body
.clientHeight
|| window
.innerHeight
|| self
.innerHeight
;
415 xScroll
-= (window
.innerWidth
- wff
);
416 yScroll
-= (window
.innerHeight
- hff
);
417 } else if (document
.body
.scrollHeight
> document
.body
.offsetHeight
|| document
.body
.scrollWidth
> document
.body
.offsetWidth
){ // all but Explorer Mac
418 yScroll
= document
.body
.scrollHeight
;
419 xScroll
= document
.body
.scrollWidth
;
420 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
421 yScroll
= document
.body
.offsetHeight
;
422 xScroll
= document
.body
.offsetWidth
;
424 jQuery("#TB_overlay").css({"height":yScroll
+"px", "width":xScroll
+"px"});
425 jQuery("#TB_HideSelect").css({"height":yScroll
+"px","width":xScroll
+"px"});
428 function TB_load_position() {
429 var pagesize
= TB_getPageSize();
430 var arrayPageScroll
= TB_getPageScrollTop();
432 .css({left
: (arrayPageScroll
[0] + (pagesize
[0] - 100)/2)+"px", top: (arrayPageScroll[1] + ((pagesize[1]-100)/2))+"px" })
433 .css({display
:"block"});
436 function TB_parseQuery ( query
) {
437 var Params
= new Object ();
438 if ( ! query
) return Params
; // return empty object
439 var Pairs
= query
.split(/[;&]/);
441 for ( var i
= 0; i
< Pairs
.length
; i
++ ) {
442 var KeyVal
= Pairs
[i
].split('=');
444 if ( ! KeyVal
|| KeyVal
.length
!= 2 ) continue;
445 var key
= unescape( KeyVal
[0] );
446 var val
= unescape( KeyVal
[1] );
447 val
= val
.replace(/\+/g, ' ');
453 function TB_getPageScrollTop(){
457 if (self
.pageYOffset
|| self
.pageXOffset
) {
458 yScrolltop
= self
.pageYOffset
;
459 xScrollleft
= self
.pageXOffset
;
461 } else if (document
.documentElement
&& document
.documentElement
.scrollTop
|| document
.documentElement
.scrollLeft
){// Explorer 6 Strict
462 yScrolltop
= document
.documentElement
.scrollTop
;
463 xScrollleft
= document
.documentElement
.scrollLeft
;
465 } else if (document
.body
) {// all other Explorers
466 yScrolltop
= document
.body
.scrollTop
;
467 xScrollleft
= document
.body
.scrollLeft
;
469 arrayPageScroll
= new Array(xScrollleft
,yScrolltop
)
470 return arrayPageScroll
;
473 function TB_getPageSize(){
474 var de
= document
.documentElement
;
475 var w
= window
.innerWidth
|| self
.innerWidth
|| (de
&&de
.clientWidth
) || document
.body
.clientWidth
;
476 var h
= window
.innerHeight
|| self
.innerHeight
|| (de
&&de
.clientHeight
) || document
.body
.clientHeight
477 arrayPageSize
= new Array(w
,h
)
478 return arrayPageSize
;
481 function TB_recadre(){