XOOPS China - 为图片浏览增加了遮罩层的应用 [技术论坛

XOOPS China 讨论区 > 风格制作 > 主页风格 > 为图片浏览增加了遮罩层的应用

正在浏览： 2 名游客

到底部

前一个主题

下一个主题

[无发表权] 请登录或者注册

ffxk

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

项目管理员

注册日期:
2004/7/19 23:57

来自重庆

所属群组：
注册会员
ComSupp
推广组

帖子: 1245 | 精华: 2

等级： 30; EXP： 65
HP： 148 / 741
MP： 415 / 7027

演示地址：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>

1/16 15:01

_________________
Xoops风格演示:http://theme.xoops.org.cn
风格更新列表
Ffxk'Blog

工具箱

短消息

PDF

书签

打印

主题	作者	最后发表
为图片浏览增加了遮罩层的应用	ffxk	1/16 15:01
回复: 为图片浏览增加了遮罩层的应用	domecc	1/16 17:09
回复: 为图片浏览增加了遮罩层的应用	ideasky	1/16 17:18
回复: 为图片浏览增加了遮罩层的应用	ideasky	1/16 17:46
回复: 为图片浏览增加了遮罩层的应用	ideasky	1/16 17:51
回复: 为图片浏览增加了遮罩层的应用	ffxk	1/16 19:09
回复: 为图片浏览增加了遮罩层的应用	gulize	1/17 8:41
回复: 为图片浏览增加了遮罩层的应用	gulize	1/17 8:45
回复: 为图片浏览增加了遮罩层的应用	smartboy	2/6 17:41
回复: 为图片浏览增加了遮罩层的应用	smartboy	2/6 18:11
回复: 为图片浏览增加了遮罩层的应用	hasj	9/22 0:44
回复: 为图片浏览增加了遮罩层的应用	hunnuh	9/22 19:17
回复: 为图片浏览增加了遮罩层的应用	hasj	9/24 4:07

回顶部

前一个主题

下一个主题

[无发表权] 请登录或者注册

您可以查看帖子。

您不可发帖。

您不可回复。

您不可编辑自己的帖子。

您不可删除自己的帖子。

您不可发起投票调查。

您不可在投票调查中投票。

您不可上传附件。

您不可不经审核直接发帖。

您不可使用主题类别。

您不可以使用HTML语法。

您不可以使用签名档。