空空裤兜 空空裤兜
  • 首页
  • 分类目录
    • 博客建设
    • 兜兜转转
    • 每月一帖
    • 技术存档
  • 留言
  • 豆瓣
  • 人气文章排行榜
  • 热门标签
  • 博客大事记
  • 开往
首页 › 技术存档 › 免插件使用slimbox › 评论页 1

免插件使用slimbox

空空裤兜
14 年前

换上良心的主题一段时间了,这个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://www.kudou.org/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(); ?>

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

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

代码
59
41
wordpress添加文章表情
上一篇
简单备份wordpress连接表
下一篇

评论 (41)

取消
  • 林木木

    恩,第一个支持!~

    14 年前 回复
    • iceray

      @林木木 @林木木: 哇咔咔,相当及时

      14 年前 回复
  • 夏星辰

    这功能的确不错,可我是用不上了,一来我的图片都是小图而且不带大图链接(外国主机外国图床,不敢放大图),二来我又想搞纯css主题(各种动态特效也都是css弄的,虽然只有chrome上有)。

    14 年前 回复
    • iceray

      @夏星辰 @夏星辰: 小图会有看不清楚的时候,我的很多都是截图,纯CSS的载入快啊。

      14 年前 回复
  • GPL风

    额,我去试试,谢谢博主

    14 年前 回复
    • iceray

      @GPL风 @GPL风: 就是修改麻烦点,效果还不错

      14 年前 回复
  • 佐小白

    这个图片框子以前最早用的,还是挺不错的。 😮

    14 年前 回复
    • iceray

      @佐小白 @佐小白: 体积小巧,效果不错

      14 年前 回复
  • snowperd

    难道木木有沙发利器?

    14 年前 回复
    • iceray

      @snowperd @snowperd: 这个我就不知道了,反正很快

      14 年前 回复
    • 林木木

      @snowperd @snowperd: 因为我收到pinback了~

      14 年前 回复
  • 无冷

    $(" '.post-content.' a[ rel!=link]:has(img ) " ). slimbox( 4: )也可以写到那个js里面去 😀

    14 年前 回复
    • iceray

      @无冷 @无冷: 不懂JQ,当时放上去没效果,就参照Z大的代码放在header.php里了

      14 年前 回复
  • mofei

    嗯...继续折腾着!

    14 年前 回复
    • iceray

      @mofei @mofei: 得折腾啊,人懒,怕哪天不折腾就再也不折腾了

      14 年前 回复
  • 电商圈

    主题很好。第一次来,留个脚印哈

    14 年前 回复
  • 祛斑

    还不用不到,支持一下!

    14 年前 回复
  • 燕郊

    对这个不了解呀

    14 年前 回复
  • Firm

    没想到代码这么简单啊。

    14 年前 回复
    • iceray

      @Firm @Firm: 确实很简单,哈哈,难了咱也不会呀

      14 年前 回复
  • 真谛小黑

    技术性的东西还真多啊,哈哈,我那里可没那么多技术性质的,都是“邪恶”的东西,嘿嘿

    14 年前 回复
    • iceray

      @真谛小黑 @真谛小黑: 也没啥技术,就是自己折腾的一点记录

      14 年前 回复
  • JaCall

    很久 没 来了!

    14 年前 回复
    • iceray

      @JaCall @JaCall: 记得常来哦。

      14 年前 回复
  • 西华秦

    话说好多地方都看到这个主题挖,你的还是1.1。良心已经升级1.2了。这个滑动解锁很happy丫。

    14 年前 回复
    • iceray

      @西华秦 @西华秦: 已经升级到1.2了,style文件中的版本代码不影响使用,所以没改

      14 年前 回复
    • 西华秦

      @iceray @iceray: 这个滑动锁是咋搞定的?

      14 年前 回复
    • iceray

      @西华秦 @西华秦: 是良心最新升级包里的

      14 年前 回复
  • 西华秦

    请问fuctions.php里关于qaptcha的部分是咋写的呢?

    14 年前 回复
    • iceray

      @西华秦 @西华秦: 教程里有的呀

      14 年前 回复

猜你喜欢

  • PVE和NAS共享一台UPS停电自动关机
  • 宝塔无法启动fail2ban解决方法
  • 小主机:从折腾到放弃
  • 我的2023
  • QQ24周年

空空裤兜

和过去过不去,跟未来合不来。
255
文章
1K
评论
407
获赞

随缘推荐

搬家到狗云
CentOS如何发送邮件
修改Linux Vps主机名
wordpress添加文章表情
爷爷走了

2017-06

04
2017 / 07

专题展示

ARM架构linux安装.NET
3 年前
ARM架构LNMP下部署Microsoft 365 E5 Renew X
3 年前
Postfix配置记录
12 年前
添加微信开放平台
12 年前
wordpress添加文章表情
14 年前
Copyright © 2010-2025 空空裤兜. Designed by nicetheme.
  • 首页
  • 分类目录
    • 博客建设
    • 兜兜转转
    • 每月一帖
    • 技术存档
  • 留言
  • 豆瓣
  • 人气文章排行榜
  • 热门标签
  • 博客大事记
  • 开往