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
``shell
npm install smartphoto --save
`

or yarn

`shell
yarn add smartphoto
`

Usage


require
`js
const SmartPhoto = require('smartphoto');
`

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

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

$3

`html












`

$3







































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
`js
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

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

$3

`js
// when the modal opened
photo.on('open',function(){
console.log('open');
});
// when the modal closed
photo.on('close',function(){
console.log('close');
});
// when all images are loaded
photo.on('loadall',function(){
console.log('loadall');
});
// when photo is changed
photo.on('change',function(){
console.log('change');
});
// when swipe started
photo.on('swipestart',function(){
console.log('swipestart');
});
// when swipe ended
photo.on('swipeend',function(){
console.log('swipeend');
});
// when zoomed in
photo.on('zoomin',function(){
console.log('zoomin');
});
// when zoomed out
photo.on('zoomout',function(){
console.log('zoomout');
});
``

$3

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)

Download

Download ZIP

Github

https://github.com/appleple/SmartPhoto

Contributor

@steelydylan

License

Code and documentation copyright 2017 by appleple, Inc. Code released under the MIT License.