thickbox 的修改和添加的应用

  1. /*
  2.  * Thickbox 3.1 - One Box To Rule Them All.
  3.  * By Cody Lindley (http://www.codylindley.com)
  4.  * Copyright (c) 2007 cody lindley
  5.  * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
  6. */
  7.           
  8. var tb_pathToImage = "images/loadingAnimation.gif";
  9. /*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/
  10. //on page load call tb_init
  11. $(document).ready(function(){   
  12.     tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
  13.     imgLoader = new Image();// preload image
  14.     imgLoader.src = tb_pathToImage;
  15. });
  16. //add thickbox to href & area elements that have a class of .thickbox
  17. function tb_init(domChunk){
  18.     $(domChunk).click(function(){
  19.     var t = this.title || this.name || null;
  20.     var a = this.href || this.alt;
  21.     var g = this.rel || false;
  22.     tb_show(t,a,g);
  23.     this.blur();
  24.     return false;
  25.     });
  26. }
  27. function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
  28.     try {
  29.         if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
  30.             $("body","html").css({height: "100%", width: "100%"});
  31.             $("html").css("overflow","hidden");
  32.             if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
  33.                 $("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
  34.                 $("#TB_overlay").click(tb_remove);
  35.             }
  36.         }else{//all others
  37.             if(document.getElementById("TB_overlay") === null){
  38.                 $("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
  39.                 $("#TB_overlay").click(tb_remove);
  40.             }
  41.         }
  42.         
  43.         if(tb_detectMacXFF()){
  44.             $("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
  45.         }else{
  46.             $("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
  47.         }
  48.         
  49.         if(caption===null){caption="";}
  50.         $("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
  51.         $('#TB_load').show();//show loader
  52.         
  53.         var baseURL;
  54.        if(url.indexOf("?")!==-1){ //ff there is a query string involved
  55.             baseURL = url.substr(0, url.indexOf("?"));
  56.        }else
  57.             baseURL = url;
  58.        }
  59.        
  60.        var urlString = //.jpg$|/.jpeg$|/.png$|/.gif$|/.bmp$/;
  61.        var urlType = baseURL.toLowerCase().match(urlString);
  62.         if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
  63.                 
  64.             TB_PrevCaption = "";
  65.             TB_PrevURL = "";
  66.             TB_PrevHTML = "";
  67.             TB_NextCaption = "";
  68.             TB_NextURL = "";
  69.             TB_NextHTML = "";
  70.             TB_imageCount = "";
  71.             TB_FoundURL = false;
  72.             if(imageGroup){
  73.                 TB_TempArray = $("a[@rel="+imageGroup+"]").get();
  74.                 for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {
  75.                     var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
  76.                         if (!(TB_TempArray[TB_Counter].href == url)) {                      
  77.                             if (TB_FoundURL) {
  78.                                 TB_NextCaption = TB_TempArray[TB_Counter].title;
  79.                                 TB_NextURL = TB_TempArray[TB_Counter].href;
  80.                                 TB_NextHTML = "<span id='TB_next'>  <a href='#'>Next ></a></span>";
  81.                             } else {
  82.                                 TB_PrevCaption = TB_TempArray[TB_Counter].title;
  83.                                 TB_PrevURL = TB_TempArray[TB_Counter].href;
  84.                                 TB_PrevHTML = "<span id='TB_prev'>  <a href='#'>< Prev</a></span>";
  85.                             }
  86.                         } else {
  87.                             TB_FoundURL = true;
  88.                             TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);                                         
  89.                         }
  90.                 }
  91.             }
  92.             imgPreloader = new Image();
  93.             imgPreloader.onload = function(){       
  94.             imgPreloader.onload = null;
  95.                 
  96.             // Resizing large images - orginal by Christian Montoya edited by me.
  97.             var pagesize = tb_getPageSize();
  98.             var x = pagesize[0] - 150;
  99.             var y = pagesize[1] - 150;
  100.             var imageWidth = imgPreloader.width;
  101.             var imageHeight = imgPreloader.height;
  102.             if (imageWidth > x) {
  103.                 imageHeight = imageHeight * (x / imageWidth); 
  104.                 imageWidth = x; 
  105.                 if (imageHeight > y) { 
  106.                     imageWidth = imageWidth * (y / imageHeight); 
  107.                     imageHeight = y; 
  108.                 }
  109.             } else if (imageHeight > y) { 
  110.                 imageWidth = imageWidth * (y / imageHeight); 
  111.                 imageHeight = y; 
  112.                 if (imageWidth > x) { 
  113.                     imageHeight = imageHeight * (x / imageWidth); 
  114.                     imageWidth = x;
  115.                 }
  116.             }
  117.             // End Resizing
  118.             
  119.             TB_WIDTH = imageWidth + 30;
  120.             TB_HEIGHT = imageHeight + 60;
  121.             $("#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'>关闭</a> | Esc 键</div>");        
  122.             
  123.             $("#TB_closeWindowButton").click(tb_remove);
  124.             
  125.             if (!(TB_PrevHTML === "")) {
  126.                 function goPrev(){
  127.                     if($(document).unbind("click",goPrev)){$(document).unbind("click",goPrev);}
  128.                     $("#TB_window").remove();
  129.                     $("body").append("<div id='TB_window'></div>");
  130.                     tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
  131.                     return false;   
  132.                 }
  133.                 $("#TB_prev").click(goPrev);
  134.             }
  135.             
  136.             if (!(TB_NextHTML === "")) {        
  137.                 function goNext(){
  138.                     $("#TB_window").remove();
  139.                     $("body").append("<div id='TB_window'></div>");
  140.                     tb_show(TB_NextCaption, TB_NextURL, imageGroup);                
  141.                     return false;   
  142.                 }
  143.                 $("#TB_next").click(goNext);
  144.                 
  145.             }
  146.             document.onkeydown = function(e){   
  147.                 if (e == null) { // ie
  148.                     keycode = event.keyCode;
  149.                 } else { // mozilla
  150.                     keycode = e.which;
  151.                 }
  152.                 if(keycode == 27){ // close
  153.                     tb_remove();
  154.                 } else if(keycode == 190){ // display previous image
  155.                     if(!(TB_NextHTML == "")){
  156.                         document.onkeydown = "";
  157.                         goNext();
  158.                     }
  159.                 } else if(keycode == 188){ // display next image
  160.                     if(!(TB_PrevHTML == "")){
  161.                         document.onkeydown = "";
  162.                         goPrev();
  163.                     }
  164.                 }   
  165.             };
  166.             
  167.             tb_position();
  168.             $("#TB_load").remove();
  169.             $("#TB_ImageOff").click(tb_remove);
  170.             $("#TB_window").css({display:"block"}); //for safari using css instead of show
  171.             };
  172.             
  173.             imgPreloader.src = url;
  174.         }else{//code to show html
  175.             
  176.             var queryString = url.replace(/^[^/?]+/??/,'');
  177.             var params = tb_parseQuery( queryString );
  178.             TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
  179.             TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
  180.             ajaxContentW = TB_WIDTH - 30;
  181.             ajaxContentH = TB_HEIGHT - 45;
  182.             
  183.             if(url.indexOf('TB_iframe') != -1){// either iframe or ajax window      
  184.                     urlNoQuery = url.split('TB_');
  185.                     $("#TB_iframeContent").remove();
  186.                     if(params['modal'] != "true"){//iframe no modal
  187.                         $("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>关闭</a> | Esc 键</div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' οnlοad='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' > </iframe>");
  188.                     }else{//iframe modal
  189.                     $("#TB_overlay").unbind();
  190.                         $("#TB_window").append("<iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' οnlοad='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'> </iframe>");
  191.                     }
  192.             }else{// not an iframe, ajax
  193.                     if($("#TB_window").css("display") != "block"){
  194.                         if(params['modal'] != "true"){//ajax no modal
  195.                         $("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>关闭</a> | Esc 键</div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px'></div>");
  196.                         }else{//ajax modal
  197.                         $("#TB_overlay").unbind();
  198.                         $("#TB_window").append("<div id='TB_ajaxContent' class='TB_modal' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>"); 
  199.                         }
  200.                     }else{//this means the window is already up, we are just loading new content via ajax
  201.                         $("#TB_ajaxContent")[0].style.width = ajaxContentW +"px";
  202.                         $("#TB_ajaxContent")[0].style.height = ajaxContentH +"px";
  203.                         $("#TB_ajaxContent")[0].scrollTop = 0;
  204.                         $("#TB_ajaxWindowTitle").html(caption);
  205.                     }
  206.             }
  207.                     
  208.             $("#TB_closeWindowButton").click(tb_remove);
  209.                 if(url.indexOf('TB_body') != -1){   
  210.                     $("#TB_ajaxContent").append(imageGroup);
  211.                     tb_position();
  212.                     $("#TB_load").remove();
  213.                     $("#TB_window").css({display:"block"}); 
  214.                 }else if(url.indexOf('TB_inline') != -1){   
  215.                     $("#TB_ajaxContent").append($('#' + params['inlineId']).children());
  216.                     $("#TB_window").unload(function () {
  217.                         $('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
  218.                     });
  219.                     tb_position();
  220.                     $("#TB_load").remove();
  221.                     $("#TB_window").css({display:"block"}); 
  222.                 }else if(url.indexOf('TB_iframe') != -1){
  223.                     tb_position();
  224.                     if($.browser.safari){//safari needs help because it will not fire iframe onload
  225.                         $("#TB_load").remove();
  226.                         $("#TB_window").css({display:"block"});
  227.                     }
  228.                 }else{
  229.                     $("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load method
  230.                         tb_position();
  231.                         $("#TB_load").remove();
  232.                         tb_init("#TB_ajaxContent a.thickbox");
  233.                         $("#TB_window").css({display:"block"});
  234.                     });
  235.                 }
  236.             
  237.         }
  238.         if(!params['modal']){
  239.             document.onkeyup = function(e){     
  240.                 if (e == null) { // ie
  241.                     keycode = event.keyCode;
  242.                 } else { // mozilla
  243.                     keycode = e.which;
  244.                 }
  245.                 if(keycode == 27){ // close
  246.                     tb_remove();
  247.                 }   
  248.             };
  249.         }
  250.         
  251.     } catch(e) {
  252.         //nothing here
  253.     }
  254. }
  255. //helper functions below
  256. function tb_showIframe(){
  257.     $("#TB_load").remove();
  258.     $("#TB_window").css({display:"block"});
  259. }
  260. function tb_remove() {
  261.     $("#TB_imageOff").unbind("click");
  262.     $("#TB_closeWindowButton").unbind("click");
  263.     $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
  264.     $("#TB_load").remove();
  265.     if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
  266.         $("body","html").css({height: "auto", width: "auto"});
  267.         $("html").css("overflow","");
  268.     }
  269.     document.onkeydown = "";
  270.     document.onkeyup = "";
  271.     return false;
  272. }
  273. function tb_removeload() {
  274.     tb_remove();
  275.     window.location=document.URL;
  276.     return false;
  277. }
  278. function tb_position() {
  279.     $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
  280.     if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
  281.         $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
  282.     }
  283. }
  284. function tb_parseQuery ( query ) {
  285.    var Params = {};
  286.    if ( ! query ) {return Params;}// return empty object
  287.    var Pairs = query.split(/[;&]/);
  288.    for ( var i = 0; i < Pairs.length; i++ ) {
  289.       var KeyVal = Pairs[i].split('=');
  290.       if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
  291.       var key = unescape( KeyVal[0] );
  292.       var val = unescape( KeyVal[1] );
  293.       val = val.replace(//+/g, ' ');
  294.       Params[key] = val;
  295.    }
  296.    return Params;
  297. }
  298. function tb_getPageSize(){
  299.     var de = document.documentElement;
  300.     var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
  301.     var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
  302.     arrayPageSize = [w,h];
  303.     return arrayPageSize;
  304. }
  305. function tb_detectMacXFF() {
  306.   var userAgent = navigator.userAgent.toLowerCase();
  307.   if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {
  308.     return true;
  309.   }
  310. }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值