thickbox.js
上传用户:shjgzm
上传日期:2017-08-31
资源大小:2757k
文件大小:11k
源码类别:

Ajax

开发平台:

Java

  1. /*
  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.  */
  9. //on page load call TB_init
  10. $(document).ready(TB_init);
  11. //add thickbox to href elements that have a class of .thickbox
  12. function TB_init(){
  13. $("a.thickbox").click(function(){
  14. var t = this.title || this.name || null;
  15. var g = this.rel || false;
  16. TB_show(t,this.href,g);
  17. this.blur();
  18. return false;
  19. });
  20. }
  21. function TB_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
  22. try {
  23. if (document.getElementById("TB_HideSelect") == null) {
  24. $("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
  25. $("#TB_overlay").click(TB_remove);
  26. }
  27. if(caption==null){caption=""};
  28. $(window).scroll(TB_position);
  29.  
  30. TB_overlaySize();
  31. $("body").append("<div id='TB_load'><img src='images/loadingAnimation.gif' /></div>");
  32. TB_load_position();
  33.    if(url.indexOf("?")!==-1){ //If there is a query string involved
  34. var baseURL = url.substr(0, url.indexOf("?"));
  35.    }else{ 
  36.     var baseURL = url;
  37.    }
  38.    var urlString = /.jpg|.jpeg|.png|.gif|.bmp/g;
  39.    var urlType = baseURL.toLowerCase().match(urlString);
  40. if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
  41. TB_PrevCaption = "";
  42. TB_PrevURL = "";
  43. TB_PrevHTML = "";
  44. TB_NextCaption = "";
  45. TB_NextURL = "";
  46. TB_NextHTML = "";
  47. TB_imageCount = "";
  48. TB_FoundURL = false;
  49. if(imageGroup){
  50. TB_TempArray = $("a[@rel="+imageGroup+"]").get();
  51. for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML == "")); TB_Counter++) {
  52. var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
  53. if (!(TB_TempArray[TB_Counter].href == url)) {
  54. if (TB_FoundURL) {
  55. TB_NextCaption = TB_TempArray[TB_Counter].title;
  56. TB_NextURL = TB_TempArray[TB_Counter].href;
  57. TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'>Next &gt;</a></span>";
  58. } else {
  59. TB_PrevCaption = TB_TempArray[TB_Counter].title;
  60. TB_PrevURL = TB_TempArray[TB_Counter].href;
  61. TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'>&lt; Prev</a></span>";
  62. }
  63. } else {
  64. TB_FoundURL = true;
  65. TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
  66. }
  67. }
  68. }
  69. imgPreloader = new Image();
  70. imgPreloader.onload = function(){
  71. imgPreloader.onload = null;
  72. // Resizing large images - orginal by Christian Montoya edited by me.
  73. var pagesize = TB_getPageSize();
  74. var x = pagesize[0] - 150;
  75. var y = pagesize[1] - 150;
  76. var imageWidth = imgPreloader.width;
  77. var imageHeight = imgPreloader.height;
  78. if (imageWidth > x) {
  79. imageHeight = imageHeight * (x / imageWidth); 
  80. imageWidth = x; 
  81. if (imageHeight > y) { 
  82. imageWidth = imageWidth * (y / imageHeight); 
  83. imageHeight = y; 
  84. }
  85. } else if (imageHeight > y) { 
  86. imageWidth = imageWidth * (y / imageHeight); 
  87. imageHeight = y; 
  88. if (imageWidth > x) { 
  89. imageHeight = imageHeight * (x / imageWidth); 
  90. imageWidth = x;
  91. }
  92. }
  93. // End Resizing
  94. TB_WIDTH = imageWidth + 30;
  95. TB_HEIGHT = imageHeight + 60;
  96. $("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div>"); 
  97. $("#TB_closeWindowButton").click(TB_remove);
  98. if (!(TB_PrevHTML == "")) {
  99. function goPrev(){
  100. if($(document).unclick(goPrev)){$(document).unclick(goPrev)};
  101. $("#TB_window").remove();
  102. $("body").append("<div id='TB_window'></div>");
  103. TB_show(TB_PrevCaption, TB_PrevURL, imageGroup);
  104. return false;
  105. }
  106. $("#TB_prev").click(goPrev);
  107. }
  108. if (!(TB_NextHTML == "")) {
  109. function goNext(){
  110. $("#TB_window").remove();
  111. $("body").append("<div id='TB_window'></div>");
  112. TB_show(TB_NextCaption, TB_NextURL, imageGroup);
  113. return false;
  114. }
  115. $("#TB_next").click(goNext);
  116. }
  117. document.onkeydown = function(e){ 
  118. if (e == null) { // ie
  119. keycode = event.keyCode;
  120. } else { // mozilla
  121. keycode = e.which;
  122. }
  123. if(keycode == 27){ // close
  124. TB_remove();
  125. } else if(keycode == 190){ // display previous image
  126. if(!(TB_NextHTML == "")){
  127. document.onkeydown = "";
  128. goNext();
  129. }
  130. } else if(keycode == 188){ // display next image
  131. if(!(TB_PrevHTML == "")){
  132. document.onkeydown = "";
  133. goPrev();
  134. }
  135. }
  136. }
  137. TB_position();
  138. $("#TB_load").remove();
  139. $("#TB_ImageOff").click(TB_remove);
  140. $("#TB_window").css({display:"block"}); //for safari using css instead of show
  141. }
  142.   
  143. imgPreloader.src = url;
  144. }else{//code to show html pages
  145. var queryString = url.replace(/^[^?]+??/,'');
  146. var params = TB_parseQuery( queryString );
  147. TB_WIDTH = (params['width']*1) + 30;
  148. TB_HEIGHT = (params['height']*1) + 40;
  149. ajaxContentW = TB_WIDTH - 30;
  150. ajaxContentH = TB_HEIGHT - 45;
  151. if(url.indexOf('TB_iframe') != -1){
  152. urlNoQuery = url.split('TB_');
  153. $("#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>");
  154. }else{
  155. $("#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>");
  156. }
  157. $("#TB_closeWindowButton").click(TB_remove);
  158. if(url.indexOf('TB_inline') != -1){
  159. $("#TB_ajaxContent").html($('#' + params['inlineId']).html());
  160. TB_position();
  161. $("#TB_load").remove();
  162. $("#TB_window").css({display:"block"}); 
  163. }else if(url.indexOf('TB_iframe') != -1){
  164. TB_position();
  165. if(frames['TB_iframeContent'] == undefined){//be nice to safari
  166. $("#TB_load").remove();
  167. $("#TB_window").css({display:"block"});
  168. $(document).keyup( function(e){ var key = e.keyCode; if(key == 27){TB_remove()} });
  169. }
  170. }else{
  171. $("#TB_ajaxContent").load(url, function(){
  172. TB_position();
  173. $("#TB_load").remove();
  174. $("#TB_window").css({display:"block"}); 
  175. });
  176. }
  177. }
  178. $(window).resize(TB_position);
  179. document.onkeyup = function(e){ 
  180. if (e == null) { // ie
  181. keycode = event.keyCode;
  182. } else { // mozilla
  183. keycode = e.which;
  184. }
  185. if(keycode == 27){ // close
  186. TB_remove();
  187. }
  188. }
  189. } catch(e) {
  190. alert( e );
  191. }
  192. }
  193. //helper functions below
  194. function TB_showIframe(){
  195. $("#TB_load").remove();
  196. $("#TB_window").css({display:"block"});
  197. }
  198. function TB_remove() {
  199.   $("#TB_imageOff").unclick();
  200. $("#TB_overlay").unclick();
  201. $("#TB_closeWindowButton").unclick();
  202. $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').remove();});
  203. $("#TB_load").remove();
  204. return false;
  205. }
  206. function TB_position() {
  207. var pagesize = TB_getPageSize();
  208. var arrayPageScroll = TB_getPageScrollTop();
  209. $("#TB_window").css({width:TB_WIDTH+"px",left: (arrayPageScroll[0] + (pagesize[0] - TB_WIDTH)/2)+"px", top: (arrayPageScroll[1] + (pagesize[1]-TB_HEIGHT)/2)+"px" });
  210. }
  211. function TB_overlaySize(){
  212. if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {
  213. yScroll = window.innerHeight + window.scrollMaxY;
  214. xScroll = window.innerWidth + window.scrollMaxX;
  215. var deff = document.documentElement;
  216. var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
  217. var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
  218. xScroll -= (window.innerWidth - wff);
  219. yScroll -= (window.innerHeight - hff);
  220. } else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth){ // all but Explorer Mac
  221. yScroll = document.body.scrollHeight;
  222. xScroll = document.body.scrollWidth;
  223. } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  224. yScroll = document.body.offsetHeight;
  225. xScroll = document.body.offsetWidth;
  226.    }
  227. $("#TB_overlay").css({"height":yScroll +"px", "width":xScroll +"px"});
  228. $("#TB_HideSelect").css({"height":yScroll +"px","width":xScroll +"px"});
  229. }
  230. function TB_load_position() {
  231. var pagesize = TB_getPageSize();
  232. var arrayPageScroll = TB_getPageScrollTop();
  233. $("#TB_load")
  234. .css({left: (arrayPageScroll[0] + (pagesize[0] - 100)/2)+"px", top: (arrayPageScroll[1] + ((pagesize[1]-100)/2))+"px" })
  235. .css({display:"block"});
  236. }
  237. function TB_parseQuery ( query ) {
  238.    var Params = new Object ();
  239.    if ( ! query ) return Params; // return empty object
  240.    var Pairs = query.split(/[;&]/);
  241.    for ( var i = 0; i < Pairs.length; i++ ) {
  242.       var KeyVal = Pairs[i].split('=');
  243.       if ( ! KeyVal || KeyVal.length != 2 ) continue;
  244.       var key = unescape( KeyVal[0] );
  245.       var val = unescape( KeyVal[1] );
  246.       val = val.replace(/+/g, ' ');
  247.       Params[key] = val;
  248.    }
  249.    return Params;
  250. }
  251. function TB_getPageScrollTop(){
  252. var yScrolltop;
  253. var xScrollleft;
  254. if (self.pageYOffset || self.pageXOffset) {
  255. yScrolltop = self.pageYOffset;
  256. xScrollleft = self.pageXOffset;
  257. } else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){  // Explorer 6 Strict
  258. yScrolltop = document.documentElement.scrollTop;
  259. xScrollleft = document.documentElement.scrollLeft;
  260. } else if (document.body) {// all other Explorers
  261. yScrolltop = document.body.scrollTop;
  262. xScrollleft = document.body.scrollLeft;
  263. }
  264. arrayPageScroll = new Array(xScrollleft,yScrolltop) 
  265. return arrayPageScroll;
  266. }
  267. function TB_getPageSize(){
  268. var de = document.documentElement;
  269. var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
  270. var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight
  271. arrayPageSize = new Array(w,h) 
  272. return arrayPageSize;
  273. }