SmartPhoto-jquery移动手机响应式图片查看插件

SmartPhoto是一款为移动手机量身打造的响应式图片查看jquery插件。它使用简单，在桌面设备中点击图片时会以Lightbox的方式来展示图片。在移动手机的小屏幕中，会以轮播图的方式来展示图片。

SmartPhoto响应式图片的特点有：

支持pinch-in/pinch-out/drag/swipe等手势操作。
可以使用键盘或屏幕阅读器来进行访问。
使用加速计移动图片。
显示图片的URL hash地址。
可以对图片进行分组。

安装

可以通过npm或yarn来安装SmartPhoto插件。

1 2	`npm install smartphoto --save` `yarn add smartphoto`

使用方法

在页面中引入smartphoto.css和smartphoto.js文件。

1 2	`<` `link` `href="path/to/css/smartphoto.css" rel="stylesheet">` `<` `script` `src=""path/to/js/smartphoto.js">`

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

初始化插件

在页面DOM元素加载完毕之后们可以通过下面的方法来初始化SmartPhoto响应式图片插件。

require

1	`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' );
});