Accessible Mobile-friendly Image Viewer – SmartPhoto

Category: Gallery , Javascript , Modal & Popup , Recommended | June 14, 2023
Views Total:183 views
Official Page:Go to website
Last Update:June 14, 2023


Accessible Mobile-friendly Image Viewer – SmartPhoto


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 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 href="large-2.jpg" class="js-smartPhoto" data-caption="Caption 2" data-id="id-2">
  <img src="small-2.jpg" data-group="group">
<a href="large-3.jpg" class="js-smartPhoto" data-caption="Caption 3" data-id="id-3">
  <img src="small-3.jpg" data-group="group">

Enable the image viewer with default options.

  new smartPhoto(".js-smartPhoto");

All default configuration options.

  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
// go to a specific image
// add new images
// destroy the instance

Event handlers.

  // open
  // close
  // all images are loaded
  // on change
  // on swipe start


v1.6.5 (06/14/2023)

  • update

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.

    1. Sandesh Sapkota

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

  2. Qronicle

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


Leave a Reply