图片模态窗效果–当前页打开浏览图片背景透明
十二月 11, 2009 by zeze · Leave a Comment
图片模态窗效果在网上搜了一边，找到一个不错的效果，运用起来也比较方便。
效果如图：
模态窗效果
如何使用:
步骤 1 – 安装
步骤 1 – 安装
- Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> - 外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> - 检查 CSS 并确定调用的
prev.gif和next.gif文件在正确的位置. 同样要确定调用的loading.gif和close.gif文件及lightbox.js文件在正确的位置.
步骤 2 – 激活
- 添加
rel="lightbox"属性到任何一个链接标签去激活lightbox. 例如:<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>可选择项: 使用
title属性加上说明. - 如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了！
下载：
原文：图片模态窗效果–当前页打开浏览图片背景透明|web启点
来源：http://www.huddletogether.com/projects/lightbox2/
版权所有，转载请注明。
相关文章
« 上页 ChopinScript肖邦手迹字体35个激动人心时尚网站设计 下页 »
