Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/appleple/SmartPhoto
The most easy to use responsive image viewer especially for mobile devices
https://github.com/appleple/SmartPhoto
es2015 lightbox npm photoswipe photoviewer standalone
Last synced: about 2 months ago
JSON representation
The most easy to use responsive image viewer especially for mobile devices
- Host: GitHub
- URL: https://github.com/appleple/SmartPhoto
- Owner: appleple
- License: mit
- Created: 2017-03-06T11:00:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T05:52:48.000Z (almost 1 year ago)
- Last Synced: 2024-05-13T05:03:13.641Z (about 2 months ago)
- Topics: es2015, lightbox, npm, photoswipe, photoviewer, standalone
- Language: JavaScript
- Homepage: https://appleple.github.io/SmartPhoto/
- Size: 8.39 MB
- Stars: 895
- Watchers: 29
- Forks: 62
- Open Issues: 32
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Lists
- awesome-stars - SmartPhoto - The most easy to use responsive image viewer especially for mobile devices (JavaScript)
- awesome - appleple/SmartPhoto - The most easy to use responsive image viewer especially for mobile devices (JavaScript)
README
# SmartPhoto
[](https://badge.fury.io/js/smartphoto)
[](https://circleci.com/gh/appleple/SmartPhoto/tree/master)
[](https://www.npmjs.com/package/smartphoto)
[](https://raw.githubusercontent.com/appleple/SmartPhoto/master/LICENSE)
The most easy to use responsive image viewer especially for mobile devices
See [https://appleple.github.io/SmartPhoto/](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](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](https://www.npmjs.com/package/smartphoto)
- [standalone](https://raw.githubusercontent.com/appleple/smart-photo/master/js/smartphoto.js)
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();
});
```
### Basic Standalone Usage
```html
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartphoto");
});
```
### Option
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'
});
});
```
### Event
```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');
});
```
### 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](https://github.com/appleple/SmartPhoto/archive/master.zip)
## Github
[https://github.com/appleple/SmartPhoto](https://github.com/appleple/SmartPhoto)
## Contributor
[@steelydylan](https://github.com/steelydylan)
## License
Code and documentation copyright 2017 by appleple, Inc. Code released under the [MIT License](https://github.com/appleple/SmartPhoto/blob/master/LICENSE).
