Mobile-first Image Viewer In Modal Style - jQuery mtfPicViewer

Mobile-first Image Viewer In Modal Style - jQuery mtfPicViewer
File Size: 18.4 KB
Views Total: 176
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

mtfPicViewer is a responsive, mobile-friendly, jQuery based image viewer plugin that enables the visitor to view all grouped images in a fullscreen modal.

Key Features:

  • [Desktop]: Navigation arrows.
  • [Desktop & Mobile]: Pagination bullets.
  • [Desktop & Mobile]: Click to enlarge.
  • [Mobile]: Swipe to navigate between images.
  • [Mobile]: Pinch to zoom.

How to use it:

1. Insert the mtfPicViewer plugin's files into the HTML 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 group of images to a container element.

<div class="example">
  <div>
    <img src="1.jpg" alt="Image 1">
    <img src="2.jpg" alt="Image 2">
    <img src="3.jpg" alt="Image 3">
  </div>
</div>

3. Attach the plugin to the top container and done.

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

4. Append a custom CSS class to the image viewer.

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

5. Callback functions.

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

This awesome jQuery plugin is developed by mantoufan. For more Advanced Usages, please check the demo page or visit the official website.