首页 > CMS应用 > 正文
wordpress非插件实现图片SLIMBOX特效

原本是在途者(刚子) 让我帮他找一个图片特效的插件,折腾了很多插件似乎都跟主题本身有些冲突,一直都没成功,并且PastDust本人还有一个很扯淡的习惯,那就是能不用插件就不用插件,然后就全网搜索到了一个不需要安装插件的SLIMBOX图片特效实现方法,共享给大家。

第一步:首先加载jquery,这个不解释,你可以自己折腾最新版本的,也可以用wordpress自带默认的,无要求。

第二步:下载slimbox.js,或者你可以去官方下载插件包,提取slimbox.js就OK了

第三步:将slimbox.js放到任何一个你比较方便调用的地方,比如本站就是放在主题目录的js文件夹里面,然后调用代码就是

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/slimbox.js”></script>

第四步:修改一下slimbox.js文件以应用于你的主题

将$(“.post-content a:has(img)”).slimbox();

修改为您文章内容css容器

例如本站是<div class=”entry-content”>上面红色部分就修改为entry-content

第五步:加入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;}

记得提取在官方下载的安装包里面的图片在你主题目录的images文件夹

打完收工………………

 

文章评论

共有 0 条评论

Top