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

为图片浏览增加了遮罩层的应用 [技术论坛 - 主题综合]

XOOPS China 讨论区 > XOOPS Theme (主题) > 主题综合 > 为图片浏览增加了遮罩层的应用

正在浏览:   1 名游客



 到底部   前一个主题   下一个主题  [无发表权] 请登录或者注册

(1) 2 »


为图片浏览增加了遮罩层的应用
项目管理员
注册日期:
2004/7/19 23:57
来自 重庆
所属群组:
注册会员
ComSupp
推广组
帖子: 1273 | 精华: 2
等级: 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中加入:

<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>

2007/1/16 15:01
_________________
Xoops风格演示:http://theme.xoops.org.cn
风格更新列表
Ffxk'Blog
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 为图片浏览增加了遮罩层的应用
网站管理员
注册日期:
2005/10/29 13:32
来自 北京
所属群组:
网站管理员
注册会员
ComSupp
推广组
帖子: 2214 | 精华: 25
等级: 38; EXP: 43
HP: 187 / 935
MP: 738 / 13326
离线
太棒了!

2007/1/16 17:09
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 为图片浏览增加了遮罩层的应用
高级会员
注册日期:
2006/9/24 7:48
所属群组:
注册会员
帖子: 110 | 精华: 1
等级: 9; EXP: 50
HP: 0 / 212
MP: 36 / 2467
离线
这个我曾经在我的网站上应用过,应用在NEWS,aticle,NEWBB等可编辑HTML文本中还可以,不过每次都要手动输入rel="lightbox[*]"此类代码显的麻繁,要是能整合到编辑器中那就很好了!类似wordpress的lightbox插件

2007/1/16 17:18
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 为图片浏览增加了遮罩层的应用
高级会员
注册日期:
2006/9/24 7:48
所属群组:
注册会员
帖子: 110 | 精华: 1
等级: 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
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 为图片浏览增加了遮罩层的应用
高级会员
注册日期:
2006/9/24 7:48
所属群组:
注册会员
帖子: 110 | 精华: 1
等级: 9; EXP: 50
HP: 0 / 212
MP: 36 / 2467
离线
不能编辑自己的帖子,真的很麻繁,发现了自己的错误又该不了!
只好再回帖声明修改了!

<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}>css/lightbox.css" type="text/css" media="screen" />

应该是这样的,修改了刚才误写的目录,CSS调用目录pngHack改为CSS

2007/1/16 17:51
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 为图片浏览增加了遮罩层的应用
项目管理员
注册日期:
2004/7/19 23:57
来自 重庆
所属群组:
注册会员
ComSupp
推广组
帖子: 1273 | 精华: 2
等级: 30; EXP: 93
HP: 149 / 748
MP: 424 / 13450
离线
引用:

ideasky 写道:
不能编辑自己的帖子,真的很麻繁,发现了自己的错误又该不了!
只好再回帖声明修改了!

<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}>css/lightbox.css" type="text/css" media="screen" />

应该是这样的,修改了刚才误写的目录,CSS调用目录pngHack改为CSS

对,放在根目录在THEME中调用很好。

我就是放在images目录下,但是要记得修改JS和CSS文件里的图片路径.

2007/1/16 19:09
_________________
Xoops风格演示:http://theme.xoops.org.cn
风格更新列表
Ffxk'Blog
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 为图片浏览增加了遮罩层的应用
高级会员
注册日期:
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.
For example the hook for exgallery uses LightBox script (to be inserted in the directory "include" of the core) and rmsoft MyFolder (portfolio) modules it which has to him this same script in its own files.
This script can be very easily usable on the totality of the modules by carrying out very light modifications of files php, or quite simply of templates (utility of the overload of the topics) and some lines of call in the part "head" of the theme.
Not wishing that these scripts are in a repertory of the core, the use of the file jseffects proved to be necessary for the files .js, .css and the images of the latter at a single place.

I thus carried out experimental versions as example of the Morphogenesis template theme 1.10 with scripts LightBox and ThickBox.
You will say to me: "but why not with these two scripts?", for the excellent reason that principal scripts Prototype (for Lightbox) and JQuery (for thickBox) are incompatible between them. For information, I also raised a small incompatibility between JQuery/ThickBox and our dear Xoops.js, but I know that our community will put itself at work to solve this problem, within sight of the richness that this last script could bring to our sites (the tunnel page of XoopsTestKris uses ThickBox)

ThickBox for image in personal Block



ThickBox in RmSoft MyFolder module


Nota : the visual effects ThickBox or LightBox are nearly identical for a image


MorPhoGENeSis 1.1.0 is downloadable HERE
MorPhoGENeSis 1.1 Experimentation “LightBox” is downloadable HERE
MorPhoGENeSis 1.1 Experimentation “ThickBox” downloadable - is reserved HERE only for test and debuggage!
Theme in action at this address
The files are to be decompressed and to install directly with the root of your site, it should be known that scripts will pose problems for the validation with respect to standards W3 C.
For the use of scripts LightBox or ThickBox in Xoops and its modules, two new subjects are open on the forum Xoops France, and for the Morphogenesis template theme in which we will be able to put our questions and answers, like our achievements:

LighBox and Xoops (initially, this subject will also relate to Prototype, Scriptaculous and their plugins)
ThickBox and Xoops (initially, this subject will also relate to JQuery and its plugins, such as for example this one)
Morphogenesis Template theme Topic


During January/February 2007, I will publish a new article on this template theme with suitable documentation like some tutoriels in french video flash.

Theme in action at this address


Open in new window

Open in new window

2007/1/17 8:41
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 为图片浏览增加了遮罩层的应用
高级会员
注册日期:
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
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 为图片浏览增加了遮罩层的应用
初级会员
注册日期:
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
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 为图片浏览增加了遮罩层的应用
初级会员
注册日期:
2007/1/30 16:00
所属群组:
注册会员
帖子: 23
等级: 3; EXP: 52
HP: 0 / 63
MP: 7 / 667
离线
<{$xoops_imageurl}>这些的smarty的变量在哪里设置?

2007/2/6 18:11
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


(1) 2 »

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


不可查看帖子。
不可发帖。
不可回复。
不可编辑自己的帖子。
不可删除自己的帖子。
不可发起投票调查。
不可在投票调查中投票。
不可上传附件。
不可不经审核直接发帖。
不可使用主题类别。
不可使用HTML语法。
不可使用签名档。

[高级搜索]