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

该日志由 Kevin 发表于 2007, July 7, 4:30 PM

刚刚用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']) {  

在下面加上以下代码:

PHP代码
  1. if ($imagenum > 1){   
  2. $lightboxrel = "lightbox[roadtrip]";   
  3. }   
  4. else{   
  5. $lightboxrel = "lightbox";   
  6. }  

 

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

XML/HTML代码
  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.bluefeel.com/show-599-1.html

还是有人说不知道怎么改,汗, , 还是提供一下Global.php吧:global.php

 

附件: lightbox.rar (70.97 K, 下载次数:365)

 蓝风网络日志标签:    图片, 插件, sablog
网摘: Yahoo Baidu Google Bolaa 365Key Yesky Wozhai POCO ViVi YouNote Hexun Del.icio.us Yeeyoo igooi I2Key Cn3 Bytemen Furl Blinklist Blogmarks Technorati 分享到饭否

« 上一篇: 广州地铁终于开始提倡“靠右站稳,左侧同行”了 | 下一篇:尼古拉斯.凯奇的《预见未来》 & 无名氏... »

相关文章: (最多只显示10条记录)
引用: 点击获得Trackback地址,Encode: UTF-8 点击获得Trackback地址,Encode: GB2312 or GBK 点击获得Trackback地址,Encode: BIG5
» 我要发表评论 你的参与是我最大的动力!    访客评论: (34条记录)
  1. 1楼 samool 引用回复该评论
    我顶你的肺..................哇哈哈.
  2. 2楼 Kevin 引用回复该评论
    KAO,回顶!
  3. 3楼 九天 引用回复该评论
    ding
  4. 4楼 Kevin 引用回复该评论
    晕倒~~~~
  5. 5楼 星仔 引用回复该评论
    global.php

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

    在哪里加呀?你发这个文件上来下载不就行了?
  6. 6楼 Kevin 引用回复该评论
    我不是给出下面的例子了吗?
    <a href="attachment.php?id=$image[0]" target="_blank" rel="$lightboxrel">
    global.php我都不知现在有没有再次改过,提供给你当然可以,但是我不敢确定不会出错!仔细看我的例子,我已经说得很细了!
  7. 7楼 星仔 引用回复该评论
    兄弟,把global.php这文件发给我吧。。。谢谢!!
  8. 8楼 Kevin 引用回复该评论
    已上传了,你下载看看吧!
  9. 9楼 星仔 引用回复该评论
    还是一样不行~,没有变化~。就是打开图片后没有点下一张上一张的连接啊。只能一张张看。。。
  10. 10楼 Kevin 引用回复该评论
    那是你没有按我说明的那样改,不只改一个文件的,耐心看,按我说的步骤做,肯定没有问题!
  11. 11楼 Person 引用回复该评论
    按照你的修改了 还是有问题是不是这里的问题

    ="/plugins/lightbox/js/prototype.js

    我没有plugins这个文件夹
  12. 12楼 Person 引用回复该评论
    不可行验证&&
  13. 13楼 Kevin 引用回复该评论
    晕倒,你们都不看我写的内容的,附件里不是有这个下载吗?
  14. 14楼 chinaman 引用回复该评论
    酷爱这风格...有没有办法拿下来?
    http://www.pkpop.com/blog
  15. 15楼 chinaman 引用回复该评论
    他的是1.2SABLOG的要1.6的
  16. 16楼 Kevin 引用回复该评论
    不好意思,我不是风格专业户!
  17. 17楼 dken 引用回复该评论
    引用 chinaman 说过的话:
    他的是1.2SABLOG的要1.6的


    升级程序呀,,
  18. 18楼 Kevin 引用回复该评论
    DKEN的风格不错!喜欢!
  19. 19楼 dken 引用回复该评论
    引用 Kevin 说过的话:
    DKEN的风格不错!喜欢!


    官方上下载的,,呵呵,,
  20. 20楼 Kevin 引用回复该评论
    嗯,那你选得不错,哈,很清爽!
Total:3412Next ›
 
发表评论:( 来了就留个脚印吧!你的参与是我最大的动力!)