600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 黄聪:wordpress博客用Slimbox2实现lightbox效果(免插件)(转)

黄聪:wordpress博客用Slimbox2实现lightbox效果(免插件)(转)

时间:2020-11-23 22:07:04

相关推荐

黄聪:wordpress博客用Slimbox2实现lightbox效果(免插件)(转)

wordpress博客(免插件)用Slimbox2实现lightbox效果。图片比较多的wordpress博客如果来点lightbox图片特效,那无疑为你的博客增色不少。只是,很多lightbox效果插件比较臃肿,虽然lightbox效果非常漂亮,但是影响博客速度还是有点不值得,那在wordpress上有没有免插件实现lightbox效果的办法呢?下面就给大家分享免插件实现lightbox效果

首先是JQuery(你必须先加载JQuery)请确定你的博客加载了JQ库,没有加载JQ库的话,请把下面代码加入header.php相关位置。如果加载过就无需重复加载了。

1、<script type="text/javascript" src="/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

2、然后是js的调用:

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

这样是只要在内容页中调用就行 不在首页调用可以提高打开速度

3、Box Css:

/*slimbox2*/#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/prev.gif') no-repeat 0 15%;}#lbNextLink{right:0;}#lbNextLink:hover{background:transparent url('images/next.gif') no-repeat 100% 15%;}#lbCloseLink {display: block;float: right;width: 66px;height: 22px;background: transparent url('images/close.gif') no-repeat center; margin: 5px 0;outline: none;}

以上样式添加到你的CSS里面即可

4、修改JS文件中的$(".post-content a:has(img)").slimbox(); 把post-content 改为你的主题控制内容CSS

打开single.php,找到<?php the_content(); ?>,夹着它的div的class既是这里要控制的属性。如果没有可以自定义一个~

文章提及的相关文件下载(请选择IE下载)

slimbox2.js文件放在你主题的JS文件夹下,那些图片文件放在你主题images文件夹下。需要修改范围控制也请修改其中的slimbox2.js文件。

下载: slimbox2.rar

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。