lightbox图片展示效果

1.lightbox

头部导入:

<script type="text/javascript" src="../Public/Js/prototype.js"></script>
<script type="text/javascript" src="../Public/Js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../Public/Js/lightbox.js"></script>
<link rel="stylesheet" href="../Public/css/lightbox.css" type="text/css" media="screen" />

使用一:单张图片

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

使用二:多张

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #</a>

使用三:点击一张,跳转到多张

单张代码:
<a href="{$r.thumb}" title="{$r.title}" rel="lightbox[{$r.id}]"><img src="{$r.thumb}" alt="{$r.title}"/></a> 多张代码:
<span style="display: none">
<a href="http://mhimg1.mnsfz.com/pic/meihuo/2014-4-17/1/1072419661367991439.jpg" rel="lightbox[1]"></a>
<a href="http://qcimg1.mnsfz.com/pic/qingchun/2014-4-9/1/1.jpg" rel="lightbox[1]"></a>
<a href="http://qcimg1.mnsfz.com/pic/qingchun/2014-4-9/1/10.jpg" rel="lightbox[1]"></a>
</span>

注意rel="lightbox[1]", 也可以是rel="lightbox[2]",rel="lightbox[3]",....  其中的[] 是识别,是否是同一组图。

来源地址:http://d.lanrentuku.com/down/js/tupian-90/

上一篇:css实现六边形图片(最简单易懂方法实现高逼格图片展示)


下一篇:zz 游戏程序员的学习之路(中文版)