npm install smartphotoThe 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.
via npm
``shell`
npm install smartphoto --save
or yarn
`shell`
yarn add smartphoto
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');
});
``| 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) |