寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,435,463 次
  • 运行天数:619 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

在SaBlog中轻松应用酷炫的图片展示方式LightBox

刚刚用Sablog的时候,一开始就想把喜欢的LightBox图片展示效果应用于sablog,后来发现Wodi已做好了这件事,于是把他的东西照搬过来,发现一些问题,按照他提供的来修改的话,页面总会出错,有时候页面只显示了一小部分,一开始以为是我自己修改时的问题,于是按照他的思路改,终于可以用了,这几天又发现原来不只我一个人用了会出错,比如傻猫也是这样……傻猫那天跟我直接要了那几个改动过的文件,就在发给他文件之后,我偶然发现,其实那个特效还是有问题:

1、虽然点击图片以后是有效果出来,但是不能实现多张图片连续展示的效果,只能一张张的点击打开;

2、假如使用sablog中的编辑器为附件图片排版时,图片也是没有LightBox特殊

于是刚才仔细看了一下,发现其实实现的方法并不用像Wodi那样繁琐,按我现在用的这样稍微一下就行了:

1、下载下面的附件,解压到sablog的根目录下;

2、打开模板中的index.php,在</head>(最后不要改变这个位置,测试发现,在一些位置的话,加载js时会出错)之前加入以下代码:

XML/HTML代码
  1. <script type=“text/javascript” src=“/plugins/lightbox/js/prototype.js”></script>
  2. <script type=“text/javascript” src=“/plugins/lightbox/js/scriptaculous.js?load=effects”></script>
  3. <script type=“text/javascript” src=“/plugins/lightbox/js/lightbox.js”></script>
  4. <link rel=“stylesheet” href=“/plugins/lightbox/css/lightbox.css” type=“text/css” media=“screen” />

3、修改模版的show.php,找到:

PHP代码
  1. if ($article[‘image’]) {

在下面加上以下代码:

XML/HTML代码
  1. if ($imagenum > 1){
  2. $lightboxrel = “lightbox[roadtrip]”;
  3. }
  4. else{
  5. $lightboxrel = “lightbox”;
  6. }

同时把图片的链接都加上rel=”$lightboxrel”的属性

如:

PHP代码
  1. <a href=“attachment.php?id=$image[0]” target=“_blank” rel=“$lightboxrel”>

同理,以同样的代码修改normal.php

4,修改根目录的global.php,找到:

PHP代码
  1. global $article, $attachmentids, $options;
  2. if ($article[‘image’][$aid]) {
  3. $attachmentids[]=$aid;

在下面加上:

PHP代码
  1. $imagenum = count($article[‘image’]);
  2. if ($imagenum > 1){
  3. $lightboxrel = “lightbox[roadtrip]”;
  4. }
  5. else{
  6. $lightboxrel = “lightbox”;
  7. }

同时把图片的链接都加上rel=”$lightboxrel”的属性

这样,LightBox的特效就能完美的应用于Sablog了!

演示可看:http://www.bokelife.com/?action=show&id=40

原文章地址:http://www.bluefeel.com/show-601-1.html

附件:lightbox.rar

本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2007-11-09
2,399 views
标签:
暂无评论

发表评论

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。