Creating an Image Viewer Gallery In Modal Style | mtfPicViewer MTF

mtfPicViewer is a responsive, mobile-friendly, jQuery-based plugin that enables a visitor to view all your collages in full-screen mode.

Add photo slideshow function like WeChat Moments to the website and H5 app. You can view large images and double-tap to zoom in or scroll to switch between images and tap to return.

Key Features:

Click the photo/video,
Sliding / dragging the mouse / ← ← key / small point / toggle button
Two fingers / double
Double-click the R key
One finger/mouse drag
Click / ESC key

How to make use of it:

1. Insert the mtfPicViewer plugin’s information into the HTML web page.

<link rel="stylesheet" href="/path/to/jquery.mtfpicviewer.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.mtfpicviewer.js"></script>

2. Add a bunch of photos to a container component.

<div class="example">
  <div>
    // Add Images Here
  </div>
</div>

3. Attach the plugin to the top container and accomplished it.

$('.example').mtfpicviewer({
  selector: 'img',
  attrSelector: 'src',
  parentSelector: 'div'
});

4. Append a customized CSS class to the picture viewer.

$('.example').mtfpicviewer({
  selector: 'img',
  attrSelector: 'src',
  parentSelector: 'div',
  className: 'pic-viewer'
});

5. Callback features.

$('.example').mtfpicviewer({
  onChange: function(curIndex, preIndex) {
    // do something
  },
  onOpen: function(curIndex) {
    // do something
  },
  onClose: function(curIndex) {
    // do something
  }
});

Mobile-first Image Viewer In Modal Style, mtfPicViewer MTF Image Viewer Plugin/Github

mtfPicViewer MTF Image Viewer Demo