JavaScript图库 — Lightbox 和 ThickBox 的示例

前端技术 everyinch 1689℃ 0评论

DOM操作、遍历以及动态CSS操作能为的网站的最终用户创建更敏捷的体验,而利用这些的最典型的应用就是图库了。目前,浏览器功能越来越强大,动态脚本和功能也日臻完善,而这种提升使得一些高质量的图库相继面世。其中Lightbox和ThickBox是其中的典型代表,它们能够提供的行为包括:
1. 当点击图库中的图片时,会弹出一个图片覆盖层,而不是直接连接到相应的图片上
2. 显示图片覆盖层,半透明的图层覆盖到整个页面上(使图层之下的内容模糊化)
3. 图片覆盖层上会有链接图片的某种形式的说明
4. 图片覆盖层上有导航功能
1. Lightbox
Lightbox是DOM图库的开山之作,它的发布刺激了其它图库的开发。这个图库是从零开始开发出来的,关于这个库的更多信息可以从http://lokeshdhakar.com/projects/lightbox/中找到。下图展示了lightbox的屏幕截图。
lightbox
lightbox以完全分离式的方式运行,要使用它,需要:
1. 在页面中包含 lightbox.js

<script type="text/javascript" src="lightbox.js"></script>

2. 在图片链接上添加 rel=”lightbox” 属性,利用title属性显示可选的图片标题例如:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

示例代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gallery_lightbox</title>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/lightbox.js"></script>
</head>
<body>
<a href="images/luding.jpg" rel="lightbox" title="my caption"><img src="images/luding_thumb.jpg" width="100" height="64" /></a>
</body>
</html>

2. ThickBox
ThickBox由Cody Lindley使用jQuery库创建。它与lightbox类型,但更为小巧,并支持使用Ajax加载外部的HTML文件。关于这个库的更多信息可以从http://codylindley.com/thickbox/中找到。要想使用ThickBox,需要:
1. 加载jQuery和ThickBox

<script type="text/javascript" src="ThickBox/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="ThickBox/thickbox.js"></script>

2. 加载相应的CSS文件

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

或者:

<style type="text/css" media="all">@import "path-to-file/thickbox.css";</style>

3. 在图片链接上添加 class=”thickbox” 属性,例如:
一个简单的示例代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gallery_thickbox</title>
<script type="text/javascript" src="ThickBox/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="ThickBox/thickbox.js"></script>
<link rel="stylesheet" href="ThickBox/thickbox.css" type="text/css" media="screen" />
</head>

<body>
<a href="images/luding.jpg" class="thickbox"><img src="images/luding_thumb.jpg" width="100" height="64" /></a>
</html>


转载请注明:陈童的博客 » JavaScript图库 — Lightbox 和 ThickBox 的示例

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量