免插件使用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文件中,下面放上修改后的样式代码:
1: #lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}
2: #lbCenter,#lbBottomContainer{position:absolute;z-index:9999;overflow:hidden;background-color:#fff;-moz-border-radius:3px 3px 3px 3px;}.
3: lbLoading{background:#fff url(images/loading.gif) no-repeat center;}
4: #lbImage{position:absolute;left:0;top:0;border:10px solid #fff;background-repeat:no-repeat;}
5: #lbPrevLink,#lbNextLink{display:block;position:absolute;top:0;width:50%;outline:none;}
6: #lbPrevLink{left:0;}
7: #lbPrevLink:hover{background:transparent url(images/prevlabel.gif) no-repeat 0 15%;}
8: #lbNextLink{right:0;}
9: #lbNextLink:hover{background:transparent url(images/nextlabel.gif) no-repeat 100% 15%;}
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;}
11: #lbCloseLink{display:block;float:right;width:66px;height:22px;background:transparent url(images/closelabel.gif) no-repeat center;margin:5px 0;outline:none;}
12: #lbCaption,#lbNumber{margin-right:71px;}
13: #lbCaption{font-weight:bold;}
只是修改了图片的调用位置。
第四步,主题调用JS文件。在header.php中填入以下代码:
1: <script type="text/javascript" src="https://cdn.osgz.com/wp-content/uploads/scripts/slimbox2.js"></script>
2: <script type="text/javascript">
3: jQuery(function($){$("'.post-content.' a[rel!=link]:has(img)").slimbox(
4: );});</script>
注意第三行的post-content是包含图片的DIV,请打开single.php根据你自己的主题修改,顺便放上我的代码,对照着看。也就是包裹着第二行内容的div。
1: <div class="post-content">
2: <?php the_content(); ?>
哦了,现在刷新下,看看你的图片效果有了没,有一点需要注意的就是需等待页面再入完成后再点击图片查看效果,不然你就会打开一张图片了。
最后,提醒下各位,修改的插件来源于木木童鞋,修改代码出错的空空裤兜可不承担责任的哟,推荐使用插件,方便,简单。
本文由 空空裤兜 发布在 空空裤兜,转载此文请保持文章完整性,并请附上文章来源(空空裤兜)及本页链接。 如果本文侵犯您和第三方权益,请联系我及时删除。 原文链接:https://www.kudou.org/no-plugin-to-use-slimbox.html
相关文章
- 使用 IDEA 翻译插件
- webpack系列---插件(plugin)的使用
- 使用swiper插件
- springboot 之 使用jasypt加密解密插件[通俗易懂]
- 【5】Vscode Todo Tree插件使用和TODO、FIXME和XXX的注释使用说明以及自制自己的TODO图标样式!
- C++ Postfix Completion VSCode 插件
- 使用 ClusterResourceSet 为 Cluster API 集群自动安装 CNI 插件
- PageHelper分页插件源码及原理剖析
- 【错误记录】Flutter 插件不兼容 ( requires Flutter SDK version >=1.22.0 <2.0.0, url_launcher >=5.7.7 <6.0.0- )
- 【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
- 【音频处理】Melodyne 简介 ( Melodyne 音频处理注意事项 | 在音乐宿主软件中加载 Melodyne 插件 )
- 【Android Gradle 插件】BuildType 编译类型配置 ⑤ ( renderscriptDebuggable 配置 | shrinkResources 配置 )
- 【Android Gradle 插件】DexOptions 配置 ④ ( additionalParameters 属性配置 | 使用 BuildType 配置多 dex 机制 )
- 在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件
- BurpSuite插件开发指南之 API 下篇
- Epiphany是Gnome默认的浏览器,主要希望用户能关注其内容而不是浏览器本身。安装Epiphany时,你就会为其表现惊艳。同时记得安装Epiphany拓展软件包,可以使用很多插件和工具。但是Epiphany在观看Flash或JavaScript网站时会遇到问题,不过相信这一点很快就会得到解决。
- 制作高质量的JQueryPlugin插件的方法
- 使用jQuery.fn自定义jQuery翻页插件
- 写JQuery插件的基本知识
- jquery使用jquery.zclip插件复制对象的实例教程
- 兼容所有浏览器的js复制插件Zero使用介绍
- jQuery插件分享之分页插件jqPagination
- jQuery多媒体插件jQueryMediaPlugin使用详解