SmartPhoto.jsv1.1.0

Getting Started

API

Development

Getting Started

About

Touch enabled intuitive image viewer.
and you don't have to learn a lot to use this library.
If you find something wrong with this library, please let us know.

Star

Installation

Via 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" />

via npm

npm
npm install smartphoto --save
or yarn
yarn add smartphoto

API

Options

Eg. If you want the each image to be the largest size such that both its width and its height can fit inside the content area

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

Eg. you can turn off the orientation api so as not to move the image when tilting the smartphone

document.addEventListener('DOMContentLoaded',function(){
  new SmartPhoto(".js-smartPhoto",{
    useOrientationApi: false
  });
});
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

Methods

By making an instance like below, you can execute some methods through the instance

var mySmartPhoto = new SmartPhoto(".js-smartPhoto");

zoom in

mySmartPhoto.zoomPhoto();

zoom out

mySmartPhoto.zoomOutPhoto();

slide to the 6th image

mySmartPhoto.gotoSlide(6);

add new image to your gallery

mySmartPhoto.addNewItem(element);

Events

when the modal opened

mySmartPhoto.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');
});

Development

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)

Dependencies

a-template.js