jQuery教程（十三）jQuery Lightbox （插件）

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("

"); $("#TB_overlay").click(TB_remove); $(window).resize(TB_position); $(window).scroll(TB_position); $("#TB_overlay").show(); $("body").append("

");

如你所见，在文档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(""
+ "

"+caption+"); $("#TB_closeWindowButton").click(TB_remove);

另外，远程文件将使用jQuery的load()函数导入。

$("#TB_ajaxContent").load(url, function(){

转载于:https://www.cnblogs.com/myssh/archive/2009/06/05/1497135.html

jQuery教程（十三）jQuery Lightbox （插件）相关推荐

html图片点击局部放大,jQuery教程 css+jQuery实现图片局部放大预览
本篇教程介绍了jQuery教程 css+jQuery实现图片局部放大预览,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 今天有时间开始动手,使用css+jquer ...
php jquery教程下载,jquery怎么下载和引用
下载和引用jquery的方法:首先进入jQuery的官网:然后找到jQuery官网首页右侧的下载按钮:接着点击进入jQuery的下载页面并进行下载:最后用script标签引入jquery即可. 本教程 ...
jQuery 教程01——jQuery安装
1.简介 jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. jQuery ...
jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
基于 jQuery支持移动触摸设备的Lightbox插件
Swipebox是一款支持桌面.移动触摸手机和平板电脑的jquery Lightbox插件.该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放. 在线预览源码下 ...
FancyBox - 经典的 jQuery Lightbox 插件
FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...
开发人员应该知道的15个吸引力的jquery lightbox插件推荐
jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化.你可以 ...
Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
html5图片轮播在线制作教程,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
20个jQuery 图片及多媒体画廊插件
在本文中,我们将一起看一看20款最好的jquery插件,你可以利用它轻松创建功能丰富的画廊.这其中的一些支持多媒体格式,比如视频和Flash,也有一些可能是老面孔了,可以说是经过时间验证,非常可靠. ...

jQuery教程（十三）jQuery Lightbox （插件）

jQuery教程（十三）jQuery Lightbox （插件）相关推荐

最新文章

热门文章