转载自网络
Cody Lindley 移植的第一版“ Thickbox”让我第一次感受到了jQuery的魅力。后来他又做了一些 代码升级以修复若干跨浏览器的兼容性问题。
一些需要注意的地方
$(document).ready 取代了TB_init() 函数,作用是在每个包含对象名“thickbox”的链接上附加一个onClick事件。
function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.innerHTML || this.href;
TB_show(t,this.href);
this.blur();
return false;
});
当这些链接被点击时,TB_show()函数就将执行。
$("body")
.append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(TB_remove);
$(window).resize(TB_position);
$(window).scroll(TB_position);
$("#TB_overlay").show();
$("body").append("<div id='TB_load'><div id='TB_loadContent'><img
src='images/circle_animation.gif' /></div></div>");
如你所见,在文档body元素前添加了两个div元素。换句话说,这两个div元素将被添加在页面html代码的body关闭元素前。
覆盖的div将使用一个特定的包含不透明外表的CSS文件指定表现。TB_window的代码用来通过AHAH在页面中放置一张图片或者加入另一个页面。$(window).resize 和$(window).scroll 告诉jQuery在用户重新调整窗口大小或者拖动页面翻页的时候执行TB_position函数。这是保证Thickbox始终保持在窗口中心部位的手段。
接下来,Cody查询url的后缀。
var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.php|.cfm|.asp|.aspx|.jsp|.jst|.rb|.txt/g;
var urlType = url.match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images
如果这是一个图片文件,则jQuery的append函数会添加html代码到适当位置。
$("#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><div
id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>");
$("#TB_closeWindowButton").click(TB_remove);
另外,远程文件将使用jQuery的load()函数导入。
$("#TB_ajaxContent").load(url, function(){}
分享到:
相关推荐
jquery-lightbox-0.5
jquery-lightboxjquery-lightboxjquery-lightboxjquery-lightboxjquery-lightboxjquery-lightbox
jquery-lightbox-0.5 仿腾讯空间相册 ;点击缩略图时,弹出层显示原始图片!效果挺不错!
本插件是借用强大的图片浏览插件Lightbox 而扩展而来的,主要用途是用于展示图片。
<link rel="stylesheet" href="jquery.lightbox-0.5.css"> 载入 JavaScript 文件 <script src="jquery.js"></script> <script src="jquery.lightbox-0.5.js"></script> DOM 结构 <div id="element_id"> 文字说明...
sexy-lightbox-2.3_jQuery sexy-lightbox-2.3_jQuery sexy-lightbox-2.3_jQuery
此版本为jquery.lightbox-0.5修正版,解决图片源文件太大,占满屏幕问题。 使用方法,参数定义与原版相同
jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片
jQuery响应式LightBox插件可以设置两种图像的显示方式,contain和cover。lightbox中的图像可以放大和平移,还可以全屏显示。
原来的lightbox脚本在最近的8年依然很火。它是100%免费使用。 演示地址:http://www.jq22.com/plugin/564
ViewBox是一款jQuery lightbox插件。ViewBox可以显示图片,也可以显示HTML内容。它使用简单,是一款不错的jquery Lightbox插件。
slick-lightbox.js是一款基于slick.js和jquery的响应式弹出层lightbox插件。该jquery lightbox插件支持图片懒加载,支持键盘交互,支持HTML5 History API等。功能非常强大。
jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载.rar
ekko-lightbox.js是一款基于Bootstrap3的jQuery lightBox图片画廊插件。该lightBox插件基于Bootstrap的模态窗口插件来制作,可以显示图片,HTML内容,视频等,也可以远程加载内容。
jquery图片放大插件Lightbox2.6
Lightbox相册插件jquery-rebox,实用简单,支持响应式设计。
图片展示效果-jquery Lightbox 图片展示效果-jquery Lightbox
Chocolat是一款实用的响应式jQuery LightBox插件。该LightBox插件可以设置两种图像的显示方式:contain和cover。lightbox中的图像可以放大和平移,还可以全屏显示。
NULL 博文链接:https://hedahai119.iteye.com/blog/538915
<title>jQuery Lightbox插件点击弹出大图全屏展示特效</title> </head>...jQuery Lightbox插件是一款响应速度快的基于jquery.swipebox插件实现的点击小图弹出大图全屏展示特效代码。