Configure using jQuery magic image viewer

Time:2021-5-9

Preview:

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


usage method:

1. Download files

Official project address: https://github.com/thdoan/magnify

Or download here, only keep the required file: Code cloud address
You need to use CSS and JS in the assets folder

2. html

Data SRC is the link of big pictureYou don’t need to add the data SRC attribute here, but you can add it later with JQ

<img 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">
  <!--  Ali icon -- >
  <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 (manual initialization method)

<!-- jquery -->
  <script></script>
  <!-- bootstrap -->
  <script></script>
  <!-- magnify -->
  <script></script>
  <script>
    //Add data SRC attribute to image
    $('.singel-news-info img').each(function () {
        $(this).attr('data-src', $(this).attr('src'));
    });
    
    //Initialize the magnifify picture viewer
    $('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,
      //Top bar button
      headToolbar: [
        'maximize',
        'close'
      ],
      //Bottom bar button
      footToolbar: [
        'zoomIn',
        'zoomOut',
        'prev',
        'fullscreen',
        'next',
        'actualSize',
        'rotateLeft',
        'rotateRight'
      ],
      //Custom icon
      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>',
      },
      //Events
      callbacks: {
        //Open picture complete
        opened: function (el) {
          $('. Magnify button maximize'). Attr ('title ','maximize');
          $('. Magnify button close'). Attr ('title ','close');
          $('. Magnify button zoom in'). Attr ('title ','enlarge');
          $('. Magnify button zoom out'). Attr ('title ','zoom out');
          $('. Magnify button prev'). Attr ('title ','previous');
          $('. Magnify button fullscreen'). Attr ('title ','full screen');
          $('. Magnify button next'). Attr ('title ','next');
          $('.magnify-button-actual-size').attr('title', '100%');
          $('. Magnify button rotate left'). Attr ('title ','left rotation');
          $('. Magnify button rotate right'). Attr ('title ','right rotation');
        },
        //Close picture complete
        closed: function (el) {
        },
      }
    });
  </script>

Automatic initialization method and other parameters can be described in the official website document

Official website address: https://thdoan.github.io/magnify/

Recommended Today

Hot! Front and rear learning routes of GitHub target 144K

Hello, Sifu’s little friend. I’m silent Wang Er. Last week, while appreciating teacher Ruan Yifeng’s science and technology weekly, I found a powerful learning route, which has been marked with 144K on GitHub. It’s very popular. It covers not only the front-end and back-end learning routes, but also the operation and maintenance learning routes. As […]