wordpress免插件实现lightbox图片效果

这是一个纠结很久的问题,该主题的图片特效不是很理想。没有什么特效,经过不断地引擎搜索。给这主题加了个非插件实现图片lightbox的特效。下面就介绍下如何来实现。wordpress的图片特效的插件实在是太多了。功能也非常强大,但个人觉得唯一不好的就是使用了这些插件后严重影响到网站的打开速度,加载起来特慢。所以决定不使用插件来实现,这里主要是由Slimbox2实现lightbox效果的。 1:首先是JQuery(你必须先加载JQuery)请确定你的博客加载了JQuery库,没有加载JQuery库的话,请看前面一篇博文:wordpress加载JQuery的最佳方式 2:调用js:

<?php if (is_singular()) { ?>
 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slimbox2.js"></script>
 <?php } ?>
3:给主题添加lightbox的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;}
4:修改JS文件中的 $(".post-content a:has(img)").slimbox(); 把post-content 改为你的主题控制内容CSS 打开single.php,找到<?php the_content(); ?>,夹着它的div的class既是这里要控制的属性。 5:下载上面要使用的文件进行修改。 slimbox2.rar  

相关阅读RelatedRead

Wordpress4.1自带Twenty Fifteen主题禁用谷歌字体

本站新的robots.txt写法

给Wordpress主题侧边栏添加多说最新评论

酷特尔开了个微信公众平台了哈

更换了博客主题

Nginx下给wordpress设置伪静态

wordpress后台不断出现spam

6 条评论添加评论

请问,我发现我的主题好像不支持lightbox,同样为lightbox的部分,换别的主题是可以实现的,但是我现在用的主题点击图片就直接打开链接了,请问这可能是什么问题呢?

回复取消回复
@Neal

已经很久没玩过wordpress了。 在有图片的文章页面,按F12检查一下控制台有没有报错什么的, 一般可以根据报错解决这类问题。

回复取消回复

纯粹来学习的

回复取消回复