Sep 16

Lightbox JS v2.0   不指定

felix021 @ 2007-9-16 14:12 [IT » 网络] 评论(0) , 引用(0) , 阅读(3923) | Via 本站原创 | |
Lightbox JS v2.0  
第1步 - 安装
Lightbox v2.0 使用JavaScript脚本语言和CSS编写。首先需要把脚本文件引用代码添加到网页文件的head区。  

<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样式表直接引入当前页面正在使用的CSS文件中)。

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


prevlabel.gif 和 nextlabel.gif 确认这两张图片在CSS文件中引用的路径正确。 另外,还需要确认lightbox.js中的loading.gif 和 closelabel.gif引用路径没有错误。  
第2步 - 给图片添加特效
给每一个超级链接添加一个属性rel="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>


注:在每页上使用该效果的图片数量以及每组图片的数量没有限制,但是以上效果只有在网页载入完成后才能发生。  






欢迎扫码关注:




转载请注明出自 ,如是转载文则注明原出处,谢谢:)
RSS订阅地址: https://www.felix021.com/blog/feed.php
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   *非必须
网址   电邮   [注册]