在 SS 中加入 LightBox 可以提升对图片的展现效果。
下面我来教大家简单的加入流程。以 softsea 模板为例。
1、首先要下载 LightBox 的安装包(就是一个压缩包没有exe的安装),这是最新版的 LightBox 2.02,
解压之后里面有它的演示网页,对于不了解的人可以在那里看下 LightBox 的展现效果。
lightbox2.02.zip (379.04 KB)
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 文件,在需要加入的位置添加下面的代码。
复制内容到剪贴板
代码:
<!--图片附件-->
<!--{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 编辑 ]