WordPress 非插件实现图片lightbox结果

   用 wordpress 做图片展示站时,给图片加点lightbox图片特效,那无疑是给博客增色不少,并且也可以提高用户体验,试想每点一张图片就换一个窗口,那不是件让人兴奋的事!WordPress 有许多现成的lightbox特效插件,但本日先容的是不消插件的要领实现 WordPress 图片的lightbox特效,而是通过非插件方法来实现!

非插件实现 WordPress 图片lightbox特效的要领:

1.第一步是加载JQuery库,这是必需的,在主题header.php模板的</head>前添加以下代码:

<script type="text/javascript" src=http://down.chinaz.com/"http:/ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

 假如主题已加载可跳过这一步

2.下载js文件slimbox2.zip,用文本东西对个中的slimbox2.js文件举办编辑,找到代码:

$(".post a:has(img)").slimbox();

 将个中的.post改成single.php文件中困绕<?php the_content();?>代码的CSS样式,如:

<div class="entry"><?php the_content();?></div>

 那么.post就修改为.entry

3.把修改好的js文件上传至当前主题的js目次(假如没有就建设一个),然后在JQuery库代码后头添加JS挪用代码:

<?php if (is_singular()) { ?>
<script type="text/javascript" src=http://down.chinaz.com/"<?php bloginfo('template_url'); ?>/js/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.至此WordPress博客图片就有了lightbox特效。

WordPress下载:

WordPress v3.5.2 简体中文版下载

WordPress 非插件实现图片lightbox功效

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/10596.html