jquery thickbox插件

在jquery中插入第三方插件时要注意：先加载css样式，再加载jquery，之后再加载其他js的其他样式

ThickBox是一个基于JQuery类库的扩展，它能在浏览器界面上显示非常棒的UI框，它可以显示单图片，多图片，ajax请求内容或链接内容.ThickBox是用超轻量级的 jQuery 库编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k.其作用是弹出对话框、网页框，使用户体验度更加愉悦。

ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k.

ThickBox 能重新调整大于浏览器窗口的图片.

ThickBox 的多功能性包括(图片,iframed 的内容,内嵌的内容,AJAX 的内容).

thickbox的插件css样式和js样式

css样式

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {font: 12px Arial, Helvetica, sans-serif;color: #333333;
}#TB_secondLine {font: 10px Arial, Helvetica, sans-serif;color:#666666;
}#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {position: fixed;z-index:100;top: 0px;left: 0px;height:100%;width:100%;
}.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {background-color:#000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;
}* html #TB_overlay { /* ie6 hack */position: absolute;height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}#TB_window {position: fixed;background: #ffffff;z-index: 102;color:#000000;display:none;border: 4px solid #525252;text-align:left;top:50%;left:50%;
}* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}#TB_window img#TB_Image {display:block;margin: 15px 0 0 15px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;border-top: 1px solid #666;border-left: 1px solid #666;
}#TB_caption{height:25px;padding:7px 30px 10px 25px;float:left;
}#TB_closeWindow{height:25px;padding:11px 25px 10px 0;float:right;
}#TB_closeAjaxWindow{padding:7px 10px 5px 0;margin-bottom:1px;text-align:right;float:right;
}#TB_ajaxWindowTitle{float:left;padding:7px 0 5px 10px;margin-bottom:1px;
}#TB_title{background-color:#e8e8e8;height:27px;
}#TB_ajaxContent{clear:both;padding:2px 15px 15px 15px;overflow:auto;text-align:left;line-height:1.4em;
}#TB_ajaxContent.TB_modal{padding:15px;
}#TB_ajaxContent p{padding:5px 0px 5px 0px;
}#TB_load{position: fixed;display:none;height:13px;width:208px;z-index:103;top: 50%;left: 50%;margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}#TB_HideSelect{z-index:99;position:fixed;top: 0;left: 0;background-color:#fff;border:none;filter:alpha(opacity=0);-moz-opacity: 0;opacity: 0;height:100%;width:100%;
}* html #TB_HideSelect { /* ie6 hack */position: absolute;height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;margin-top:1px;_margin-bottom:1px;
}

js样式

/** Thickbox 3.1 - One Box To Rule Them All.* By Cody Lindley (http://www.codylindley.com)* Copyright (c) 2007 cody lindley* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php** Patched Version by Jamie Thompson - Fixes IE7 Positioning Issues* http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positioning-bug/
*/var tb_pathToImage = "images/loadingAnimation.gif";/*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/// fixes the fact that ie7 now reports itself as MSIE 6.0 compatible
$.browser.msie6 = $.browser.msie && /MSIE 6\.0/i.test(window.navigator.userAgent) && !/MSIE 7\.0/i.test(window.navigator.userAgent);//on page load call tb_init
$(document).ready(function(){   tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickboximgLoader = new Image();// preload imageimgLoader.src = tb_pathToImage;
});//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){$(domChunk).click(function(){var t = this.title || this.name || null;var a = this.href || this.alt;var g = this.rel || false;tb_show(t,a,g);this.blur();return false;}).removeClass('thickbox');
}function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox linktry {if (typeof document.body.style.maxHeight === "undefined") {//if IE 6$("body","html").css({height: "100%", width: "100%"});$("html").css("overflow","");if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");$("#TB_overlay").click(tb_remove);}}else{//all othersif(document.getElementById("TB_overlay") === null){$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");$("#TB_overlay").click(tb_remove);}}if(tb_detectMacXFF()){$("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash}else{$("#TB_overlay").addClass("TB_overlayBG");//use background and opacity}if(caption===null){caption="";}$("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page$('#TB_load').show();//show loadervar baseURL;if(url.indexOf("?")!==-1){ //ff there is a query string involvedbaseURL = url.substr(0, url.indexOf("?"));}else{ baseURL = url;}var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;var urlType = baseURL.toLowerCase().match(urlString);if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show imagesTB_PrevCaption = "";TB_PrevURL = "";TB_PrevHTML = "";TB_NextCaption = "";TB_NextURL = "";TB_NextHTML = "";TB_imageCount = "";TB_FoundURL = false;if(imageGroup){TB_TempArray = $("a[@rel="+imageGroup+"]").get();for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);if (!(TB_TempArray[TB_Counter].href == url)) {                     if (TB_FoundURL) {TB_NextCaption = TB_TempArray[TB_Counter].title;TB_NextURL = TB_TempArray[TB_Counter].href;TB_NextHTML = "<span id='TB_next'>  <a href='#'>Next ></a></span>";} else {TB_PrevCaption = TB_TempArray[TB_Counter].title;TB_PrevURL = TB_TempArray[TB_Counter].href;TB_PrevHTML = "<span id='TB_prev'>  <a href='#'>< Prev</a></span>";}} else {TB_FoundURL = true;TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);                                         }}}imgPreloader = new Image();imgPreloader.onload = function(){     imgPreloader.onload = null;// Resizing large images - orginal by Christian Montoya edited by me.var pagesize = tb_getPageSize();var x = pagesize[0] - 150;var y = pagesize[1] - 150;var imageWidth = imgPreloader.width;var imageHeight = imgPreloader.height;if (imageWidth > x) {imageHeight = imageHeight * (x / imageWidth); imageWidth = x; if (imageHeight > y) { imageWidth = imageWidth * (y / imageHeight); imageHeight = y; }} else if (imageHeight > y) { imageWidth = imageWidth * (y / imageHeight); imageHeight = y; if (imageWidth > x) { imageHeight = imageHeight * (x / imageWidth); imageWidth = x;}}// End ResizingTB_WIDTH = imageWidth + 30;TB_HEIGHT = imageHeight + 60;$("#TB_window").append("<img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/>" + "<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> or Esc Key</div>");       $("#TB_closeWindowButton").click(tb_remove);if (!(TB_PrevHTML === "")) {function goPrev(){if($(document).unbind("click",goPrev)){$(document).unbind("click",goPrev);}$("#TB_window").remove();$("body").append("<div id='TB_window'></div>");tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);return false;  }$("#TB_prev").click(goPrev);}if (!(TB_NextHTML === "")) {      function goNext(){$("#TB_window").remove();$("body").append("<div id='TB_window'></div>");tb_show(TB_NextCaption, TB_NextURL, imageGroup);              return false;   }$("#TB_next").click(goNext);}document.onkeydown = function(e){     if (e == null) { // iekeycode = event.keyCode;} else { // mozillakeycode = e.which;}if(keycode == 27){ // closetb_remove();} else if(keycode == 190){ // display previous imageif(!(TB_NextHTML == "")){document.onkeydown = "";goNext();}} else if(keycode == 188){ // display next imageif(!(TB_PrevHTML == "")){document.onkeydown = "";goPrev();}}  };tb_position();$("#TB_load").remove();$("#TB_Image").click(tb_remove);$("#TB_window").css({display:"block"}); //for safari using css instead of show};imgPreloader.src = url;}else{//code to show htmlvar queryString = url.replace(/^[^\?]+\??/,'');var params = tb_parseQuery( queryString );TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URLTB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URLajaxContentW = TB_WIDTH - 30;ajaxContentH = TB_HEIGHT - 45;if(url.indexOf('TB_iframe') != -1){// either iframe or ajax window     urlNoQuery = url.split('TB_');$("#TB_iframeContent").remove();if(params['modal'] != "true"){//iframe no modal$("#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> or Esc Key</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>");}else{//iframe modal$("#TB_overlay").unbind();$("#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>");}}else{// not an iframe, ajaxif($("#TB_window").css("display") != "block"){if(params['modal'] != "true"){//ajax no modal$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a> or Esc Key</div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px'></div>");}else{//ajax modal$("#TB_overlay").unbind();$("#TB_window").append("<div id='TB_ajaxContent' class='TB_modal' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");    }}else{//this means the window is already up, we are just loading new content via ajax$("#TB_ajaxContent")[0].style.width = ajaxContentW +"px";$("#TB_ajaxContent")[0].style.height = ajaxContentH +"px";$("#TB_ajaxContent")[0].scrollTop = 0;$("#TB_ajaxWindowTitle").html(caption);}}$("#TB_closeWindowButton").click(tb_remove);if(url.indexOf('TB_inline') != -1){ $("#TB_ajaxContent").append($('#' + params['inlineId']).children());$("#TB_window").unload(function () {$('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished});tb_position();$("#TB_load").remove();$("#TB_window").css({display:"block"}); }else if(url.indexOf('TB_iframe') != -1){tb_position();if($.browser.safari){//safari needs help because it will not fire iframe onload$("#TB_load").remove();$("#TB_window").css({display:"block"});}}else{$("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load methodtb_position();$("#TB_load").remove();tb_init("#TB_ajaxContent a.thickbox");$("#TB_window").css({display:"block"});});}}if(!params['modal']){document.onkeyup = function(e){   if (e == null) { // iekeycode = event.keyCode;} else { // mozillakeycode = e.which;}if(keycode == 27){ // closetb_remove();}    };}} catch(e) {//nothing here}
}//helper functions below
function tb_showIframe(){$("#TB_load").remove();$("#TB_window").css({display:"block"});
}function tb_remove() {$("#TB_imageOff").unbind("click");$("#TB_closeWindowButton").unbind("click");$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});$("#TB_load").remove();if (typeof document.body.style.maxHeight == "undefined") {//if IE 6$("body","html").css({height: "auto", width: "auto"});$("html").css("overflow","");}document.onkeydown = "";document.onkeyup = "";return false;
}function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});if ( !(jQuery.browser.msie6)) { // take away IE6$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});}
}function tb_parseQuery ( query ) {var Params = {};if ( ! query ) {return Params;}// return empty objectvar Pairs = query.split(/[;&]/);for ( var i = 0; i < Pairs.length; i++ ) {var KeyVal = Pairs[i].split('=');if ( ! KeyVal || KeyVal.length != 2 ) {continue;}var key = unescape( KeyVal[0] );var val = unescape( KeyVal[1] );val = val.replace(/\+/g, ' ');Params[key] = val;}return Params;
}function tb_getPageSize(){var de = document.documentElement;var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;arrayPageSize = [w,h];return arrayPageSize;
}function tb_detectMacXFF() {var userAgent = navigator.userAgent.toLowerCase();if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {return true;}
}

在jquery中用thickbox插件进行使用的例子，用来进行查看大图片

图片

点击图中的“观看清晰图片”，会出现下图的图片

图一

图二

HTML代码

<a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"><img alt="点击看大图" src="data:images/look.gif" /></a>

thickbox在jquery中不需要代码，直接插入thickbox插件就可以实现

jquery thickbox插件相关推荐

超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...
超强1000个jquery极品插件！（连载中。。。。最近更新20090710）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
超强1000个jquery极品插件！（感觉好强大，转载一下）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
超强1000个jquery极品插件！
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...
jquery 封装幻灯插件_21个jQuery幻灯片插件
jquery 封装幻灯插件 21 jQuery Slideshow plugins 21个jQuery幻灯片插件 In today`s article I collected most attract ...
超强1000个jquery极品插件！（连载中。。。。最近更新20100127）
1.导航类 (1) Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 二手图书二手书特价书旧书网 (2)jQuery-Horizont ...
1000个jquery极品插件
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收 ...
超强1000个jquery极品插件
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...
超强1000个jquery极品插件！（转）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

jquery thickbox插件

jquery thickbox插件相关推荐

最新文章

热门文章