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.
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" />npm install smartphoto --saveyarn add smartphotoEg. 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 |
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);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');
});| 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) |