Accessible Mobile-friendly Image Viewer – SmartPhoto

Category: Gallery , Javascript , Modal & Popup , Recommended | November 25, 2019
Author: appleple
Views Total: 951 views
Official Page: Go to website
Last Update: November 25, 2019
License: MIT

Preview:

Accessible Mobile-friendly Image Viewer – SmartPhoto

Description:

SmartPhoto is a standalone JavaScript library for creating 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:

Link to the SmartPhoto’s JavaScript and CSS files.

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

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>

Enable the image viewer with default options.

window.addEventListener('load',function(){
  new smartPhoto(".js-smartPhoto");
});

All default configuration options.

window.addEventListener('load',function(){
  new smartPhoto(".js-smartPhoto",{
      // enables navigation arrows
      arrows: true,

      // enables navigation images
      nav: true,

      // enables animation 
      showAnimation: true,

      // enables vertical gravity
      verticalGravity: false,

      // uses accelerometer to move images
      useOrientationApi: false,

      // uses history API
      useHistoryApi: true,

      // swipe to close
      swipeTopToClose: false,
      swipeBottomToClose: true,

      // swipe offset in px
      swipeOffset: 100,

      // header & footer height
      headerHeight: 60,
      footerHeight: 60,

      // frequency to apply force to images
      forceInterval: 10,

      // scroll offset to load images
      loadOffset: 2,

      // resize images to fill/fit on the screen
      resizeStyle: 'fit',

      // default attribute for lazy load
      lazyAttribute: 'data-src'

      // default CSS classes
      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',
        smartPhotoArrowHideIcon: 'smartphoto-arrow-hide',
        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'
      },

      // default messages
      message: {
        gotoNextImage: 'go to the next image',
        gotoPrevImage: 'go to the previous image',
        closeDialog: 'close the image dialog'
      }
  });
});

API methods.

// zoom in/out images
mySmartPhoto.zoomPhoto();
mySmartPhoto.zoomOutPhoto();

// go to a specific image
mySmartPhoto.gotoSlide(6);

// add new images
mySmartPhoto.addNewItem(element);

// destroy the instance
mySmartPhoto.destroy();

Event handlers.

mySmartPhoto.on('open',function(){
  // open
});

photo.on('close',function(){
  // close
});

photo.on('loadall',function(){
  // all images are loaded
});

photo.on('change',function(){
  // on change
});

photo.on('swipestart',function(){
  // on swipe start
});

Changelog:

v1.6.0 (11/25/2019)

  • add destroy event
  • doc updated

You Might Be Interested In:


3 thoughts on “Accessible Mobile-friendly Image Viewer – SmartPhoto

  1. Mosleh Uddin

    Is there any option to loop. when image end starts from first. arrow will always show.

    Reply
    1. Sandesh Sapkota

      How to disable the (bottom par)t images thumbnails ?

      Reply
  2. Qronicle

    The data-group attribute needs to be on the anchor element instead of the image within in order to work.

    Reply

Leave a Reply