为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
项目管理员
注册日期:
2004/7/19 23:57 来自 重庆
所属群组:
注册会员 ComSupp 推广组 等级: 30; EXP: 93
HP: 149 / 748 MP: 424 / 13450 |
演示地址: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" 例如:
这样就可以显示例一效果 以下方法可以对一组图片(图片数量无限)进行浏览
2007/1/16 15:01
|
|||
|
回复: 为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
网站管理员
注册日期:
2005/10/29 13:32 来自 北京
所属群组:
网站管理员 注册会员 ComSupp 推广组 等级: 38; EXP: 43
HP: 187 / 935 MP: 738 / 13326 |
太棒了!
2007/1/16 17:09
|
|||
|
回复: 为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
高级会员
注册日期:
2006/9/24 7:48 所属群组:
注册会员 等级: 9; EXP: 50
HP: 0 / 212 MP: 36 / 2467 |
这个我曾经在我的网站上应用过,应用在NEWS,aticle,NEWBB等可编辑HTML文本中还可以,不过每次都要手动输入rel="lightbox[*]"此类代码显的麻繁,要是能整合到编辑器中那就很好了!类似wordpress的lightbox插件
2007/1/16 17:18
|
|||
|
回复: 为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
高级会员
注册日期:
2006/9/24 7:48 所属群组:
注册会员 等级: 9; EXP: 50
HP: 0 / 212 MP: 36 / 2467 |
建议使用以下介绍的目录存放相应文件,以便优化空间!
lightbox里有三个目录,分别是JS,IMAGES和css,这三个目录存放在xoops系统的根目录下, 只要每次在需要实现此效果的theme里,编辑相应的theme.html文件在其中<head>区域添加 <code> <script src="<{$xoops_imageurl}>js/prototype.js" type="text/javascript"></script> <script src="<{$xoops_imageurl}>js/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="<{$xoops_imageurl}>js/lightbox.js" type="text/javascript"></script> <link rel="stylesheet" href="<{$xoops_imageurl}>pngHack/lightbox.css" type="text/css" media="screen" /> </code> 便可简单调用所有文件!
2007/1/16 17:46
|
|||
|
回复: 为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
高级会员
注册日期:
2006/9/24 7:48 所属群组:
注册会员 等级: 9; EXP: 50
HP: 0 / 212 MP: 36 / 2467 |
不能编辑自己的帖子,真的很麻繁,发现了自己的错误又该不了!
只好再回帖声明修改了!
应该是这样的,修改了刚才误写的目录,CSS调用目录pngHack改为CSS
2007/1/16 17:51
|
|||
|
回复: 为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
项目管理员
注册日期:
2004/7/19 23:57 来自 重庆
所属群组:
注册会员 ComSupp 推广组 等级: 30; EXP: 93
HP: 149 / 748 MP: 424 / 13450 |
引用:
对,放在根目录在THEME中调用很好。 我就是放在images目录下,但是要记得修改JS和CSS文件里的图片路径.
2007/1/16 19:09
|
|||
|
回复: 为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
高级会员
注册日期:
2006/6/26 6:38 所属群组:
注册会员
帖子:
92
等级: 8; EXP: 57
HP: 0 / 189 MP: 30 / 2332 |
Xoops英文站有一个前不久公开的Theme已经把这个类似功能整合了
Release 1.10 of Mor.pho.GEN.e.sis http://www.xoops.org/modules/news/article.php?storyid=3593 引用: The directory "jseffects" is used to deposit various scripts that a designer or developper of module can use. Indeed, I noticed that we had modules more and more and themes which used Ajax Javascript for example, which became redundant and could either slow down the posting of the site, or this limited only to the only module or topic, whereas we could use it for others.
2007/1/17 8:41
|
|||
|
回复: 为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
高级会员
注册日期:
2006/6/26 6:38 所属群组:
注册会员
帖子:
92
等级: 8; EXP: 57
HP: 0 / 189 MP: 30 / 2332 |
这个Theme的Demo在这里
http://xoopstestkris.free.fr/2016/modules/myHome/ 点击Essai Thickbox和Thickbox Extgallery里的图片就能看到结果
2007/1/17 8:45
|
|||
|
回复: 为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
初级会员
注册日期:
2007/1/30 16:00 所属群组:
注册会员
帖子:
23
等级: 3; EXP: 52
HP: 0 / 63 MP: 7 / 667 |
<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" /> 这些的内容,我可以只接在新建的module里的index.php文件的添加吗?
2007/2/6 17:41
|
|||
|
回复: 为图片浏览增加了遮罩层的应用 |
||||
---|---|---|---|---|
初级会员
注册日期:
2007/1/30 16:00 所属群组:
注册会员
帖子:
23
等级: 3; EXP: 52
HP: 0 / 63 MP: 7 / 667 |
<{$xoops_imageurl}>这些的smarty的变量在哪里设置?
2007/2/6 18:11
|
|||
|