smartphoto

SmartPhoto

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

Feature

• Flick images to zoom/drag images and also switch to next images
• Use Accelerometer to move images
• Scale images to fill/fit on the screen so to view each image clearly

Instration

• npm
• standalone

via npm

npm install smartphoto --save

or yarn

yarn add smartphoto

Usage

smartphoto.js

require

const smartPhoto = require('smartphoto');

window.addEventListener('load',function(){
    new smartPhoto(".js-img-viwer");
});

jquery-smartphoto.js

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

Option

variable	description	default
arrows	prev/next arrows	true
nav	navigation images at the bottom	true
useOrientationApi	use accelerometer to move images	false
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

When you want to hide arrows and nav

window.addEventListener('load',function(){
    new smartPhoto(".js-img-viwer",{
        arrows: false,
        nav: false
    });
});

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)

Download

Download ZIP

Github

https://github.com/appleple/SmartPhoto

License

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