非插件实现 WordPress 图片lightbox效果

2011.12.2 45 Comments 14,612 次阅读

分享一下非插件实现Wordpress图片lightbox效果的教程,图片lightbox效果在很多很多博客都用到了,今天就教大家如何来折腾。

方法:

1.既然是jquery特效当然要jquery库文件了,当然如果你的主题中有的话,这一步就可以省略了

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>

2.下载 js 文件 slimbox.zip(见本文底部),用文本工具对其中的 slimbox.js文件进行编辑,找到代码:

$(“.post-content a:has(img)”).slimbox();

将其中的.post 改成 single.php 文件中包围 代码的CSS样式,如:

<div class=”entry”><?php the_content();?></div>

那么就将.post-content改成.entry

3.把修改好的js文件上传至当前主题的目录下,然后在footer.php中添加JS调用代码:

<?php if (is_singular()) { ?>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/slimbox2.js”></script>
<?php } ?>

该代码表示,当访问的页面是single.php页面时,图片就使用 lightbox 特效

4.把下载的压缩包里的图片上传至当前主题目录的images目录中(没有就创建一个),然后在style.css文件末端添加以下CSS样式代码:

/*lightbox*/
#lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}
#lbCenter, #lbBottomContainer{position:absolute;z-index: 9999;overflow: hidden;background-color:#fff;}
.lbLoading{background:#fff url(images/loading.gif) no-repeat center;}
#lbImage {position:absolute;left:0;top:0;border:6px solid #fff;background-repeat:no-repeat;}
#lbPrevLink,#lbNextLink{display: block;position: absolute;top:0;width:50%;outline:none;}
#lbPrevLink{left:0;}
#lbPrevLink:hover{background:transparent url(images/prevlabel.gif) no-repeat 0 15%;}
#lbNextLink{right:0;}
#lbNextLink:hover{background:transparent url(images/nextlabel.gif) no-repeat 100% 15%;}
#lbCloseLink {display: block;float: right;width: 66px;height: 22px;background: transparent url(images/closelabel.gif) no-repeat center; margin: 5px 0;outline: none;}
#lbCaption,#lbNumber,#lbBottom{display:none;}

5.OK,大功告成。slimbox.zip文件下载

[raricon href=http://udisk.czkdw.com/myfile/sunwei123/download/slimbox.zip]Download slimbox.zip[/raricon]

45 Responses
Comment (12)
Trackback (0)
  • #16
    最美应用 :

    用插件了 代码 也没啥 反应啊

    2014.02.17 14:50 Reply
    • 周良 :

      图片必须添加上地址,而且必须是图片的绝对地址

      2014.02.17 21:55 Reply
  • #17
    最美应用 :

    用插件了 代码 也没啥 反应啊

    2014.02.17 14:50 Reply
    • 周良 :

      图片必须添加上地址,而且必须是图片的绝对地址

      2014.02.17 21:55 Reply
  • #18
    新利18Luck :

    我就怕和模板的哪个函数冲突。。。先去折腾一下。不行再改回来。

    2013.06.20 15:25 Reply
    • 周良 :

      好的,有问题可以留言哈

      2013.06.20 15:42 Reply
  • #19
    新利18Luck :

    我就怕和模板的哪个函数冲突。。。先去折腾一下。不行再改回来。

    2013.06.20 15:25 Reply
    • 周良 :

      好的,有问题可以留言哈

      2013.06.20 15:42 Reply
  • #20
    思念谁mv :

    不咋的啊。现在这个有没有视频窗口弹出式的呢?

    2013.06.8 23:45 Reply
    • 周良 :

      目前博客没有开启这个模式

      2013.06.9 09:16 Reply
  • #21
    思念谁mv :

    不咋的啊。现在这个有没有视频窗口弹出式的呢?

    2013.06.8 23:45 Reply
    • 周良 :

      目前博客没有开启这个模式

      2013.06.9 09:16 Reply
  • 还没有Trackback
Leave a Reply