非插件实现 WordPress 图片lightbox效果

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

方法:

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

<script type=”text/javascript” src=”http://ajax.lug.ustc.edu.cn/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 条评论 / 发表评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注