The most easy to use responsive image viwer 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.
- Intuitive gestures such as pinch-in/pinch-out/drag/swipe
- Use Accelerometer to move images
- Accessible from keyboard
- Show pictures via URL hash
- Can make photo groups
via npm
npm install smartphoto --saveor yarn
yarn add smartphotorequire
const smartPhoto = require('smartphoto');smartphoto.js
document.addEventListener('DOMContentLoaded',function(){
new smartPhoto(".js-img-viwer");
});jquery-smartphoto.js
$(function(){
$(".js-img-viwer").smartPhoto();
});<a href="./assets/large-kuma.jpg" class="js-img-viwer" data-caption="くま" data-id="kuma">
<img src="./assets/kuma.jpg" width="360" data-group="0"/>
</a>
<a href="./assets/large-rakuda.jpg" class="js-img-viwer" data-caption="ラクダ" data-id="rakuda">
<img src="./assets/rakuda.jpg" width="360" data-group="0"/>
</a>
<a href="./assets/large-sai.jpg" class="js-img-viwer" data-caption="サイ" data-id="sai">
<img src="./assets/sai.jpg" width="360" data-group="0"/>
</a>
<link rel="stylesheet" href="./css/smartphoto.min.css">
<script src="./js/smartphoto.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
new smartPhoto(".js-img-viwer");
});
</script>| 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 |
document.addEventListener('DOMContentLoaded',function(){
new smartPhoto(".js-img-viwer",{
arrows: false,
nav: false
});
});You can choose if you want to scale images to fit/fill
document.addEventListener('DOMContentLoaded',function(){
new smartPhoto(".js-img-viwer",{
resizeStyle: 'fit'
});
});| 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) |
https://github.com/appleple/SmartPhoto
Code and documentation copyright 2017 by appleple, Inc. Code released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent