SmartPhoto.js

Demo

Feature

Intuitive

gestures such as pinch-in/pinch-out/drag/swipe

Accelerometer

Use Accelerometer to move images

Accessible

Accessible from keyboard and screen-reader

Link directly

Show pictures via URL hash When the page is loaded

Photo Group

make photo groups

Installation

via npm

npm install smartphoto --save

or yarn

yarn add smartphoto

CDN

Link directly to SmartPhoto files on unpkg.

<script src="https://unpkg.com/smartphoto@1.1.0/js/smartphoto.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/smartphoto@1.1.0/css/smartphoto.min.css">

Usage

Include the SmartPhoto .js/.css file in your site.

<script src="/path/to/js/smartphoto.min.js"></script>

<link rel="stylesheet" href="/path/to/css/smartphoto.min.css">

HTML

<a href="./assets/images/large-kuma.jpg" class="js-smartPhoto" data-caption="bear" data-id="bear" data-group="animal"/>
  <img src="./assets/images/kuma.jpg" />
</a>
<a href="./assets/images/large-rakuda.jpg" class="js-smartPhoto" data-caption="camel" data-id="camel" data-group="animal"/>
  <img src="./assets/images/rakuda.jpg" />
</a>
<a href="./assets/images/large-lion.jpg" class="js-smartPhoto" data-caption="lion" data-id="lion" data-group="animal"/>
  <img src="./assets/images/lion.jpg" />
</a>

smartphoto.js

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

jquery-smartphoto.js

$(function(){
    $(".js-smartPhoto").SmartPhoto();
});