免插件使用slimbox

换上良心的主题一段时间了，这个loper自带了highslide的图片放大效果，用起来还是相当不错的，并且后台对效果的开关可以控制，还是挺方便的。

最近有空，看看了主题的源文件，一个highslide的JS文件就40K，就用一个图片灯箱，加载40K的JS文件，还没算上CSS文件，太不划算了，恰好看到Z大也发布了一个简洁的灯箱效果，试着改改去。

可是整了半天还是出不来效果，想起木木也有这个效果的插件，叫slimbox to wordpress,JS文件也不到4KB，试试能不能装的上。经过反复折腾，N遍刷新，终于算是小有收获，不敢独享，贴出来给需要的各位童鞋。

第一步，去官网下载slimbox to wordpress插件，地址：http://wordpress.org/extend/plugins/slimbox2-for-wordpress/,当然，安装插件也很简单，还有后台设置面板，插件党或者懒童鞋可以直接下载安装，下面的内容可以忽略。

第二步，解压缩下载到的插件，复制slimbox.js文件到主题文件夹中，空空裤兜的是loper1.1scripts，其中loper1.1的我的主题文件夹名称，复制插件包中的图片到loper1.1images。

第三步，复制插件的CSS代码带主题的CSS文件中，下面放上修改后的样式代码：

代码语言：javascript复制

   1: #lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}

代码语言：javascript复制

   2: #lbCenter,#lbBottomContainer{position:absolute;z-index:9999;overflow:hidden;background-color:#fff;-moz-border-radius:3px 3px 3px 3px;}.

代码语言：javascript复制

   3: lbLoading{background:#fff url(images/loading.gif) no-repeat center;}

代码语言：javascript复制

   4: #lbImage{position:absolute;left:0;top:0;border:10px solid #fff;background-repeat:no-repeat;}

代码语言：javascript复制

   5: #lbPrevLink,#lbNextLink{display:block;position:absolute;top:0;width:50%;outline:none;}

代码语言：javascript复制

   6: #lbPrevLink{left:0;}

代码语言：javascript复制

   7: #lbPrevLink:hover{background:transparent url(images/prevlabel.gif) no-repeat 0 15%;}

代码语言：javascript复制

   8: #lbNextLink{right:0;}

代码语言：javascript复制

   9: #lbNextLink:hover{background:transparent url(images/nextlabel.gif) no-repeat 100% 15%;}

代码语言：javascript复制

  10: #lbBottom{font-family:Verdana,Arial,Geneva,Helvetica,sans-serif;font-size:10px;color:#666;line-height:1.4em;text-align:left;border:10px solid #fff;border-top-style:none;}

代码语言：javascript复制

  11: #lbCloseLink{display:block;float:right;width:66px;height:22px;background:transparent url(images/closelabel.gif) no-repeat center;margin:5px 0;outline:none;}

代码语言：javascript复制

  12: #lbCaption,#lbNumber{margin-right:71px;}

代码语言：javascript复制

  13: #lbCaption{font-weight:bold;}

只是修改了图片的调用位置。

第四步，主题调用JS文件。在header.php中填入以下代码：

代码语言：javascript复制

   1: <script type="text/javascript" src="https://cdn.osgz.com/wp-content/uploads/scripts/slimbox2.js"></script>

代码语言：javascript复制

   2: <script type="text/javascript">

代码语言：javascript复制

   3: jQuery(function($){$("'.post-content.' a[rel!=link]:has(img)").slimbox(

代码语言：javascript复制

   4: );});</script>

注意第三行的post-content是包含图片的DIV，请打开single.php根据你自己的主题修改，顺便放上我的代码，对照着看。也就是包裹着第二行内容的div。

代码语言：javascript复制

   1: <div class="post-content">

代码语言：javascript复制

   2:                             <?php the_content(); ?>

哦了，现在刷新下，看看你的图片效果有了没，有一点需要注意的就是需等待页面再入完成后再点击图片查看效果，不然你就会打开一张图片了。

最后，提醒下各位，修改的插件来源于木木童鞋，修改代码出错的空空裤兜可不承担责任的哟，推荐使用插件，方便，简单。

本文由 空空裤兜 发布在 空空裤兜，转载此文请保持文章完整性，并请附上文章来源（空空裤兜）及本页链接。

如果本文侵犯您和第三方权益，请联系我及时删除。

原文链接：https://cloud.tencent.com/developer/article/2232570

wordpress 网站建设 css php 网站

0 人点赞