SmartPhoto是一款为移动手机量身打造的响应式图片查看jquery插件。它使用简单,在桌面设备中点击图片时会以Lightbox的方式来展示图片。在移动手机的小屏幕中,会以轮播图的方式来展示图片。SmartPhoto响应式图片的特点有:
- 支持pinch-in/pinch-out/drag/swipe等手势操作。
- 可以使用键盘或屏幕阅读器来进行访问。
- 使用加速计移动图片。
- 显示图片的URL hash地址。
- 可以对图片进行分组。
安装
可以通过npm或yarn来安装SmartPhoto插件。
npm install smartphoto --save yarn add smartphoto
使用方法
在页面中引入smartphoto.css和smartphoto.js文件。
<link href="path/to/css/smartphoto.css" rel="stylesheet"> <script src=""path/to/js/smartphoto.js"></script>
HTML结构
SmartPhoto响应式图片的基本HTML结构如下:
<a href="./assets/large-kuma.jpg" class="js-img-viwer" data-caption="描述1" data-id="kuma" data-group="0"> <img src="./assets/kuma.jpg" width="360"/> </a> <a href="./assets/large-rakuda.jpg" class="js-img-viwer" data-caption="描述2" data-id="rakuda" data-group="0"> <img src="./assets/rakuda.jpg" width="360"/> </a> <a href="./assets/large-sai.jpg" class="js-img-viwer" data-caption="描述3" data-id="sai" data-group="0"> <img src="./assets/sai.jpg" width="360"/> </a>
初始化插件
在页面DOM元素加载完毕之后们可以通过下面的方法来初始化SmartPhoto响应式图片插件。
require
const smartPhoto = require('smartphoto');
smartphoto.js-纯js方法
document.addEventListener('DOMContentLoaded',function(){ new smartPhoto(".js-img-viwer"); });
作为jquery插件
$(function(){ $(".js-img-viwer").smartPhoto(); });
配置参数
SmartPhoto响应式图片插件的可用配置参数有:
参数 | 默认值 | 描述 |
arrows | true | 是否显示前后导航按钮。 |
nav | true | 是否在底部显示导航缩略图。 |
useOrientationApi | true | 是否使用加速计移动图片。 |
resizeStyle | 'fill' | resize图像时是fill还是fit屏幕。 |
animationSpeed | 300 | 切换图片时的动画速度。 |
forceInterval | 10 | frequency to apply force to images |
事件
SmartPhoto响应式图片插件的可用事件有:
// 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'); });
SmartPhoto响应式图片插件的github地址为:https://github.com/appleple/SmartPhoto
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!