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

发布者