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 #1</a>
使用二：多张
<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>
使用三：点击一张，跳转到多张
单张代码： <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/
原文：http://www.cnblogs.com/wesky/p/3681065.html