配置使用 jQuery Magnify 图片查看器

效果预览：

https://zdmaoa.gitee.io/jquery_magic_image_viewer/

---

使用方法：

1. 下载文件

官方项目地址：https://github.com/thdoan/magnify

或者这里下载，只保留了需要的文件：码云地址
需要用到 assets 文件夹里的css和js

2. html

data-src 是大图链接 这里可以不用添加data-src属性，后面可以用jq追加

<img data-src="" src="">

3. css

  <!-- bootstrap -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- magnify -->
  <link href="./assets/css/jquery.magnify.min.css" rel="stylesheet">
  <!-- 阿里图标 -->
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_1576642_nvbefyzwm6.css">
  <style>
    .magnify-modal {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) !important;
      overflow: hidden;
    }

    .magnify-header .magnify-toolbar {
      background-color: rgba(0, 0, 0, 0.5) !important;
    }

    .magnify-stage {
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      border-width: 0 !important;
    }

    .magnify-footer .magnify-toolbar {
      background-color: rgba(0, 0, 0, 0.5) !important;
      border-top-left-radius: 5px !important;
      border-top-right-radius: 5px !important;
    }

    .magnify-header,
    .magnify-footer {
      pointer-events: none !important;
    }

    .magnify-button {
      pointer-events: auto !important;
    }

    .magnify-toolbar.magnify-head-toolbar {
      background: none !important;
    }

    .magnify-toolbar.magnify-head-toolbar>button {
      border-radius: 100% !important;
      background: rgba(0, 0, 0, 0.5);
      margin: 5px 5px 0 0 !important;
    }

    .magnify-toolbar.magnify-foot-toolbar {
      border-radius: 50px !important;
    }

    .magnify-modal i {
      font-size: 20px;
    }

    .magnify-footer .magnify-toolbar {
      padding: 0 10px;
    }
  </style>

4. js （手动初始化方法）

  <!-- jquery -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <!-- bootstrap -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- magnify -->
  <script src="./assets/js/jquery.magnify.min.js"></script>
  <script>
    //给图片添加data-src属性
    $('.singel-news-info img').each(function () {
        $(this).attr('data-src', $(this).attr('src'));
    });
    
    //初始化magnify图片查看器
    $('img').magnify({
      draggable: true,
      resizable: true,
      movable: true,
      keyboard: true,
      title: false,
      modalWidth: 320,
      modalHeight: 320,
      fixedContent: true,
      fixedModalSize: false,
      initMaximized: false,
      gapThreshold: 0.02,
      ratioThreshold: 0.1,
      minRatio: 0.1,
      maxRatio: 16,
      // 顶部栏按钮
      headToolbar: [
        'maximize',
        'close'
      ],
      // 底部栏按钮
      footToolbar: [
        'zoomIn',
        'zoomOut',
        'prev',
        'fullscreen',
        'next',
        'actualSize',
        'rotateLeft',
        'rotateRight'
      ],
      // 自定义图标
      icons: {
        maximize: '<i class="iconfont icon-quanping"></i>',
        close: '<i class="iconfont icon-guanbi"></i>',
        zoomIn: '<i class="iconfont icon-fangda"></i>',
        zoomOut: '<i class="iconfont icon-suoxiao"></i>',
        prev: '<i class="iconfont icon-zhixiang-you-copy"></i>',
        next: '<i class="iconfont icon-zhixiang-you"></i>',
        fullscreen: '<i class="iconfont icon-fangda1"></i>',
        actualSize: '<i class="iconfont icon-ziyuan"></i>',
        rotateLeft: '<i class="iconfont icon-zuozhuan-"></i>',
        rotateRight: '<i class="iconfont icon-youzhuan-"></i>',
      },
      // 事件
      callbacks: {
        // 打开图片完成
        opened: function (el) {
          $('.magnify-button-maximize').attr('title', '最大化');
          $('.magnify-button-close').attr('title', '关闭');
          $('.magnify-button-zoom-in').attr('title', '放大');
          $('.magnify-button-zoom-out').attr('title', '缩小');
          $('.magnify-button-prev').attr('title', '上一张');
          $('.magnify-button-fullscreen').attr('title', '全屏');
          $('.magnify-button-next').attr('title', '下一张');
          $('.magnify-button-actual-size').attr('title', '100%');
          $('.magnify-button-rotate-left').attr('title', '左旋转');
          $('.magnify-button-rotate-right').attr('title', '右旋转');
        },
        // 关闭图片完成
        closed: function (el) {
        },
      }
    });
  </script>

自动初始化方法和其他参数说明可以看官网文档

官网地址：https://thdoan.github.io/magnify/