用户名 密码 记住我 还未注册?

文章管理 - 为图片浏览增加了遮罩层的应用(lightbox)

文章管理 :: Xoops Theme :: Theme其他

为图片浏览增加了遮罩层的应用(lightbox)


http://xoops.org.cn/modules/newbb/viewtopic.php?post_id=42086
原作者:ffxk
lightbox
演示地址: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中加入:

<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>
<< XOOPS风格修改简易教程 XOOPS 2 的 Smarty 变量 >>
跟踪网址
  • 文章地址: http://xoops.org.cn/modules/article/view.article.php/c14/82
  • 跟踪地址: http://xoops.org.cn/modules/article/trackback.php/82
API: 工具箱 短消息 Email PDF 书签 打印 | RSS | RDF | ATOM
Copyright© ezsky & XOOPS CHINA
网友个人意见,不代表本站立场。对于发言内容,由发表者自负责任。
发表者 树状展开