插件作者的标准出来了!Manyou诚邀开发者加盟!立即免费下载 Discuz!6.1.0正式版
Discuz! 6.1.0 使用说明
Discuz!NT升级至v2.1
开放源码下载
UCenter Home 1.2 正式版发布
官方站 | 帮助文档
基于ECShop的免费网店托管-卖否
PHP就业培训直通车 | LAMP培训大连
Discuz!收费服务内容及价格
论坛免费升级 手握手
Discuz!/ECShop 专用官方虚拟主机
【乐游-浪漫庄园】专题活动
Comsenz 招聘信息
网店系统ECShop v2.6.0正式版火热发布
基于Discuz!的免费论坛空间5D6D
第二届PHP中国开源发展及人才状况调查
 24 123
发新话题
打印

在 SupeSite 中加入 LightBox 效果

本主题由 ted1006 于 2008-1-17 10:03 移动

在 SupeSite 中加入 LightBox 效果

在 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 编辑 ]
谢谢楼主分享。!
下载下来看看,支持
好经典的效果,支持.哈哈
谢谢楼主,另外最新版2.03.3,下载地址:
http://www.huddletogether.com/pr ... /lightbox2.03.3.zip
还有一个问题,为什么softsea模板资讯使用这个效果怎么弄都没成功?
内容页面news_view.html.php,好像图片打开是由一个JS控制的?
汗,没人麽......
多谢楼主分享!
效果超炫啊!!
欢迎访问我的小站:www.xinxi110.cn迅速提升Alexa排名,SS使用讨论群:5688561
制作采集器(¥0.5-5),安装、转换、升级程序(面议)QQ272247465
我也来试试。谢谢分享
 24 123
发新话题
版块跳转