演示地址:http://www.okajax.com/demo/pic-view/index.html
xoops站上演示:http://ffxk.com/modules/wordpress/284.htm
下载地址:http://www.okajax.com/info/codedown/200611246.htm
说明:此程序由ajax中国修改制作.
使用方法:
1.head中加入:
2.放置blank.gif close.gif closelabel.gif loading.gif next.gif nextlabel.gif prev.gif prevlabel.gif 到文件夹pic-img中。
放置lightbox.css到pic-css文件夹
放置effects.js lightbox.js prototype.js scriptaculous.js到pic-js文件夹。
以上的文件夹位置可以自己设置。
3.在预览图片链接中加入标签rel="lightbox" 例如:
这样就可以显示例一效果
以下方法可以对一组图片(图片数量无限)进行浏览
xoops站上演示:http://ffxk.com/modules/wordpress/284.htm
下载地址:http://www.okajax.com/info/codedown/200611246.htm
说明:此程序由ajax中国修改制作.
使用方法:
1.head中加入:
<script type="text/javascript" src="pic-js/prototype.js"></script>
<script type="text/javascript" src="pic-js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="pic-js/lightbox.js"></script>
<link rel="stylesheet" href="pic-css/lightbox.css" type="text/css" media="screen" />
2.放置blank.gif close.gif closelabel.gif loading.gif next.gif nextlabel.gif prev.gif prevlabel.gif 到文件夹pic-img中。
放置lightbox.css到pic-css文件夹
放置effects.js lightbox.js prototype.js scriptaculous.js到pic-js文件夹。
以上的文件夹位置可以自己设置。
3.在预览图片链接中加入标签rel="lightbox" 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><IMG height=40 src="pic-img/thumb-1.jpg" width=100 border="0"></a>
这样就可以显示例一效果
以下方法可以对一组图片(图片数量无限)进行浏览
<a href="images/image-1.jpg" rel="lightbox[plants]"><IMG height=40 alt="第一张(共3张)" src="pic-img/thumb-1.jpg" width=100 border="0"></a>
<a href="images/image-2.jpg" rel="lightbox[plants]"><IMG height=40 alt="第二张(共3张)" src="pic-img/thumb-2.jpg" width=100 border="0"></a>
<a href="images/image-3.jpg" rel="lightbox[plants]"><IMG height=40 alt="第三张(共3张)" src="pic-img/thumb-3.jpg" width=100 border="0"></a>