Responsive Mobile-first Image Viewer - jQuery SmartPhoto

Responsive Mobile-first Image Viewer - jQuery SmartPhoto
File Size: 6.46 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The jQuery version of the SmartPhoto library which lets you create an accessible, responsive, mobile-friendly image viewer where the users are able to view all images in an easy-to-navigate modal popup.

More features:

  • Supports touch gestures.
  • Supports single and/or grouped images.
  • Supports keyboard interactions.
  • Custom image captions.

Install the SmartPhoto:

# Yarn
yarn add smartphoto

# NPM
$ npm install smartphoto

How to use it:

1. Link to jQuery library and the SmartPhoto plugin's JavaScript and CSS files.

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

2. Add a group of images to the webpage using the following HTML tags and attributes:

  • img: path to the small image
  • a: path to the large image
  • data-caption: image caption
  • data-id: image ID
  • data-group: used to group your images
<a href="large-1.jpg" class="js-smartPhoto" data-caption="Caption 1" data-id="id-1">
  <img src="small-1.jpg" data-group="group">
</a>
<a href="large-2.jpg" class="js-smartPhoto" data-caption="Caption 2" data-id="id-2">
  <img src="small-2.jpg" data-group="group">
</a>
<a href="large-3.jpg" class="js-smartPhoto" data-caption="Caption 3" data-id="id-3">
  <img src="small-3.jpg" data-group="group">
</a>

3. Enable the image viewer with default options.

$(".js-img-viwer").smartPhoto();

4. All default configuration options.

$(".js-img-viwer").smartPhoto({
  classNames: {
    smartPhoto: 'smartphoto',
    smartPhotoClose: 'smartphoto-close',
    smartPhotoBody: 'smartphoto-body',
    smartPhotoInner: 'smartphoto-inner',
    smartPhotoContent: 'smartphoto-content',
    smartPhotoImg: 'smartphoto-img',
    smartPhotoImgOnMove: 'smartphoto-img-onmove',
    smartPhotoImgElasticMove: 'smartphoto-img-elasticmove',
    smartPhotoImgWrap: 'smartphoto-img-wrap',
    smartPhotoArrows: 'smartphoto-arrows',
    smartPhotoNav: 'smartphoto-nav',
    smartPhotoArrowRight: 'smartphoto-arrow-right',
    smartPhotoArrowLeft: 'smartphoto-arrow-left',
    smartPhotoImgLeft: 'smartphoto-img-left',
    smartPhotoImgRight: 'smartphoto-img-right',
    smartPhotoList: 'smartphoto-list',
    smartPhotoListOnMove: 'smartphoto-list-onmove',
    smartPhotoHeader: 'smartphoto-header',
    smartPhotoCount: 'smartphoto-count',
    smartPhotoCaption: 'smartphoto-caption',
    smartPhotoDismiss: 'smartphoto-dismiss',
    smartPhotoLoader: 'smartphoto-loader',
    smartPhotoLoaderWrap: 'smartphoto-loader-wrap',
    smartPhotoImgClone: 'smartphoto-img-clone'
  },
  arrows: true,
  nav: true,
  animationSpeed: 300,
  swipeOffset: 100,
  maxWidth: 940,
  headerHeight: 60,
  footerHeight: 60,
  forceInterval: 10,
  registance: 0.5,
  resizeStyle: 'fill',
  verticalGravity: false,
  useOrientationApi: true
});

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