非插件实现 WordPress 图片lightbox效果

45

分享一下非插件实现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]

如果你有设计或者 WordPress 方面的项目需求,可以和我联系 Email:wwwzhouliang@gmail.com。

作者主页 邮箱 微博 腾讯微博 QQ Twitter Facebook Google+

共 45 条评论

  1. 思念谁mv 回复

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

    1. 周良 (文章作者) 回复

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

  2. 思念谁mv 回复

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

    1. 周良 (文章作者) 回复

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

  3. 新利18Luck 回复

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

    1. 周良 (文章作者) 回复

      好的,有问题可以留言哈

  4. 新利18Luck 回复

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

    1. 周良 (文章作者) 回复

      好的,有问题可以留言哈

  5. 最美应用 回复

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

    1. 周良 (文章作者) 回复

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

  6. 最美应用 回复

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

    1. 周良 (文章作者) 回复

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

Leave a Reply

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 Required fields are marked *

返回顶部