友人C

利用zoom.js 给全站图片添加灯箱效果
介绍 zoom.js 是一款比较简洁而有效地 jQuery 插件。 github原作者:@fat 效果:(点击图片)
扫描右侧二维码阅读全文
02
2016/09

利用zoom.js 给全站图片添加灯箱效果

介绍

zoom.js 是一款比较简洁而有效地 jQuery 插件。
github原作者:@fat

效果:(点击图片)

2.png

代码实现

前提引入jquery地址!

在 head.php 的</head>之前引入css样式表

<link rel="stylesheet" type="text/css" href="https://www.ihewro.com/zoom/css/zoom.css">

在footer.php 添加 下面 3段js

<script src="//cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.ihewro.com/zoom/dist/zoom.min.js" type="text/javascript"></script>
<script type="text/javascript">
        var setupContents = function () {
            $(".post-content img:not(article .link-box img, img[no-zoom])").each(function() {
                $(this).attr('data-action', 'zoom');
                if($(this).next().is('br')){
                    $(this).next().remove();
                }
            });

        };
 setupContents();
</script>
  • 前面两个js地址由@fat 提供

  • 最后一段js,是选择 post-content区域的图片,并且加入 data-action="zoom"属性值。是从 @Hran的主题中扒出来的。我实在写不出来==灰常感谢!

最后

这个小改动应该是近期最后一个改动啦!花费好多精力

  • 增加右下角返回顶部等功能小菜单(已经完成)
  • 重写滚动条代码(已经完成)
  • 在文章标题下方增加“百度是否收录”判断(已经完成)
  • 在文章标题下的信息前面加上小图标(已经完成)
  • 更改加载页面的样式。包括顶部加载条。(已经完成)
  • 增加 灯箱效果。(已经完成)

要开始学习数据结构了[衰!!!]

最后修改:2016 年 11 月 01 日 04 : 07 PM
如果觉得我的文章对你有用,请随意赞赏

31 条评论

  1. 泽泽

    你现在的模板没加灯箱哈

    1. 友人C
      @泽泽

      对,zoom.js 我觉得不适合这个模板,暂时就没加

  2. 不点儿

    谢谢哈 好用

    1. hewro
      @不点儿

      :oops: 喜欢就好

  3. 穿衣搭配

    谢谢分享

  4. iOS Chrome 下没有效果。另外,引用 bootstrap 仅仅是为了 CSS 效果吗?

    1. 一日

      不是CSS效果,而是作者依靠了bootstrap的框架写的,所以引入了JS。你试试这个地址,有效果吗。这个是作者的demo页面。可能是我的安装问题https://fat.github.io/zoom.js/

      1. @一日

        不行呢 #[挖鼻]

        1. 一日
          试试这两个网址,他们都是用了这个JS,不过有部分修改,好像是。1.https://hran.me/mirages.html?copyright&v=142dev22.https://www.dreamwings.cn/un1/3933.html麻烦啦
          1. @一日

            我想说安卓上可以欸

            1. 一日

              应该是#

          2. @一日

            ok 我明天再看 现在有点晚了。。。

            1. 一日

              嗯!

  5. 朱凯

    好看

  6. 整形医院

    这个效果好看

  7. 米粒博客

    效果不错哦,谢谢分享!

发表评论