SmartPhoto Download - SmartPhoto Source code download

SmartPhoto

Other source code

v1.6.5

Download

SmartPhoto

The most easy to use responsive image viewer especially for mobile devices

See https://appleple.github.io/SmartPhoto/ for complete docs and demos
If you are Japasese, See here https://www.appleple.com/blog/javascript/smartphoto-js.html instead.

Feature

Intuitive gestures such as pinch-in/pinch-out/drag/swipe
Use Accelerometer to move images
Accessible from keyboards and screen-readers
Show pictures via URL hash
Can make photo groups

Installation

npm
standalone

via npm

npm install smartphoto --save

or yarn

yarn add smartphoto

Usage

require

const SmartPhoto = require('smartphoto');

smartphoto.js

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

jquery-smartphoto.js

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

Basic Standalone Usage

Option

variable	description	default
arrows	prev/next arrows	true
nav	navigation images at the bottom	true
useOrientationApi	use accelerometer to move images	true
resizeStyle	resize images to fill/fit on the screen	'fill'
animationSpeed	animation speed when switching images	300
forceInterval	frequency to apply force to images	10

Hide parts

document.addEventListener('DOMContentLoaded',function(){new SmartPhoto(".js-smartphoto",{arrows: false,nav: false});});

Fit/Fill Option

You can choose if you want to scale images to fit/fill

document.addEventListener('DOMContentLoaded',function(){
  new SmartPhoto(".js-smartphoto",{  resizeStyle: 'fit'
  });});

Event

// when the modal openedphoto.on('open',function(){console.log('open');});// when the modal closedphoto.on('close',function(){console.log('close');});// when all images are loadedphoto.on('loadall',function(){console.log('loadall');});// when photo is changedphoto.on('change',function(){console.log('change');});// when swipe startedphoto.on('swipestart',function(){console.log('swipestart');});// when swipe endedphoto.on('swipeend',function(){console.log('swipeend');});// when zoomed inphoto.on('zoomin',function(){console.log('zoomin');});// when zoomed outphoto.on('zoomout',function(){console.log('zoomout');});

SCSS

variable	description	default
$animation-speed	animation speed when switching images	.3s
$backdrop-color	backdrop color when viewing images	rgba(0, 0, 0, 1)
$header-color	header color	rgba(0, 0, 0, .2)