在 SupeSite 中加入 LightBox 效果

ted1006 · 发表于 2008-1-17 10:01:34

在 SS 中加入 LightBox 可以提升对图片的展现效果。

下面我来教大家简单的加入流程。以 softsea 模板为例。

1、首先要下载 LightBox 的安装包（就是一个压缩包没有exe的安装），这是最新版的 LightBox 2.02，解压之后里面有它的演示网页，对于不了解的人可以在那里看下 LightBox 的展现效果。

2、解压后将 images 文件夹下的图片全部复制到 SS 的 images 文件夹中。
注：image-1.jpg ~ image-6.jpg 和 thumb-1.jpg ~ thumb-6.jpg 为示例图片，不用复制。

3、将 css 文件夹下的 lightbox.css 和 screen.css 两个 css 文件复制到相应的模板目录的 css 文件夹下，譬如 \templates\softsea\css 。

4、将 js 文件夹复制到模板目录下，譬如 \templates\softsea 。

5、在你要加入 LightBox 效果的模板中，譬如在论坛频道首页中加入对论坛附件图片的 LightBox 展示。

首先，修改 bbs_header.html.php 文件，在 head 里面加入对 css 和 js 的调用

<link rel="stylesheet" type="text/css" href="{S_URL}/templates/$_SCONFIG[template]/css/lightbox.css" media="screen" /><script src="{S_URL}/templates/$_SCONFIG[template]/js/prototype.js" type="text/javascript"></script>
<script src="{S_URL}/templates/$_SCONFIG[template]/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="{S_URL}/templates/$_SCONFIG[template]/js/lightbox.js" type="text/javascript"></script>

复制代码

修改 body 标签为

<body onload="initLightbox()">

复制代码

然后，修改 bbs_index.html.php 文件，在需要加入的位置添加下面的代码。

<div class="section clearfix">
<a href="$value[attachment]" rel="lightbox" title="$value[subject]"><img src="$value[attachment]" width="105" height="60" alt="$value[subject]" /></a>
</div>

复制代码

这段代码首先对调出论坛图片附件的信息，重要的就是在 <a> 里面加入了 rel="lightbox" 属性，还要注意在 href 中一定要填上图片的地址，不可以放帖子的地址，不然 LightBox 会加载错误的。

至此一切搞定！

[ 本帖最后由 ted1006 于 2008-2-19 08:45 编辑 ]

pc77maikongjian · 发表于 2008-1-17 10:07:53

谢谢楼主分享。！

iqye · 发表于 2008-1-17 18:30:40

下载下来看看,支持

iqye · 发表于 2008-1-17 18:34:19

好经典的效果,支持.哈哈

魔王小鱼 · 发表于 2008-1-17 21:40:48

谢谢楼主，另外最新版2.03.3，下载地址：
http://www.huddletogether.com/pr ... /lightbox2.03.3.zip
还有一个问题，为什么softsea模板资讯使用这个效果怎么弄都没成功？

魔王小鱼 · 发表于 2008-1-17 21:43:39

内容页面news_view.html.php，好像图片打开是由一个JS控制的？

魔王小鱼 · 发表于 2008-1-18 15:48:32

汗，没人麽......

powerpolly · 发表于 2008-1-19 15:09:03

多谢楼主分享！:)

2xy · 发表于 2008-1-19 20:44:27

效果超炫啊！！:)

fy007 · 发表于 2008-1-21 00:40:08

我也来试试。谢谢分享

		自动登录	找回密码
密码			立即注册

在 SupeSite 中加入 LightBox 效果

本帖子中包含更多资源