您的位置：SupeSite/X-Space官方站 >> 论坛 >> 帮助文档 >> 查看帖子

在 SupeSite 中加入 LightBox 效果

ted1006 发表于: 2008-1-17 10:01 来源: SupeSite/X-Space官方站

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

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

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

lightbox2.02.zip
(2008-01-17 10:01:34, Size: 379 KB, Downloads: 9639)

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 的调用

CODE:

 

<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 标签为

CODE:

 

<body onload="initLightbox()">

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

CODE:

 

<!--图片附件-->

  <!--{block name="bbsattachment" parameter="filetype/image/t_lastpost/2592000/order/t.replies DESC/limit/0,10/cachetime/49900/cachename/picthread/tpl/data"}-->

  <!--{if !empty( $_SBLOCK['picthread'])}-->

   <div class="section clearfix">

   <!--{loop $_SBLOCK['picthread'] $key $value}-->

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

   <!--{/loop}-->

   </div>

  <!--{/if}-->

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

至此一切搞定！

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

在 SupeSite 中加入 LightBox 效果

最新回复

最新更新主题