原创SmartPhoto手机/电脑端查看图片插件使用说明文档

SmartPhoto，官方是这样说的：最好用的响应式图像查看器，尤其适用于移动设备。

官方网址：https://appleple.github.io/SmartPhoto/

其实嘛，这个插件整体功能不是很多，只是基本的对图片进行放大缩小下一张等。不过这已经完全满足我的需求了。

此插件也提供npm或者yarn的方式安装，当然也提供与jquery搭配使用。

安装方式：

yarn安装：yarn add smartphoto

直接引入：

<link rel="stylesheet" href="https://unpkg.com/smartphoto@1.1.0/css/smartphoto.min.css">

<script src="https://unpkg.com/smartphoto@1.1.0/js/smartphoto.min.js"></script>

HTML代码：

<a href="./assets/images/large-kuma.jpg" class="js-smartPhoto" data-caption="bear" data-id="bear" data-group="animal"/>
  <img src="./assets/images/kuma.jpg" />
</a>
<a href="./assets/images/large-rakuda.jpg" class="js-smartPhoto" data-caption="camel" data-id="camel" data-group="animal"/>
  <img src="./assets/images/rakuda.jpg" />
</a>
<a href="./assets/images/large-lion.jpg" class="js-smartPhoto" data-caption="lion" data-id="lion" data-group="animal"/>
  <img src="./assets/images/lion.jpg" />
</a>

参数说明：

data-caption：图片描述

data-id：图片唯一ID

data-group：图片分组，同一组图片直接滑到下一张

//原生JS方式使用
window.addEventListener('DOMContentLoaded',function(){
    new SmartPhoto(".js-smartPhoto");
});

//jquery方式使用
$(function(){
    $(".js-smartPhoto").SmartPhoto();
});

其它功能使用如下：

<script>
	document.addEventListener('DOMContentLoaded', function () {
		/*
		//API参数使用
		var mySmartPhoto = 	new SmartPhoto(".js-smartPhoto", {
			arrows: false, //是否显示上一张/下一张箭头，默认：true
			nav: false, //是否显示底部导航缩略图，默认：true
			useOrientationApi: false, //是否使用加速计移动图像，默认：true
			resizeStyle: 'fit', //调整图像大小以填充(fill)/适应(fit)屏幕，默认值：fill
			animationSpeed: 500, //切换图片动画速度，默认：300
			forceInterval: 5 //对图像应用频率，默认：10
		});
		*/

		/*
		//方法使用
		var mySmartPhoto = 	new SmartPhoto(".js-smartPhoto");
		mySmartPhoto.zoomPhoto(); //放大
		mySmartPhoto.zoomOutPhoto(); //缩小
		mySmartPhoto.gotoSlide(6); //滑到第6张图片
		mySmartPhoto.addNewItem(element); //添加新的图片
		*/
		
		/*
		//事件使用
		var mySmartPhoto = 	new SmartPhoto(".js-smartPhoto");
		mySmartPhoto.on('open',function(){
			console.log('打开预览时响应');
		});
		mySmartPhoto.on('close',function(){
			console.log('关闭预览时响应');
		});
		mySmartPhoto.on('loadall',function(){
			console.log('加载完所有图像时响应');
		});
		mySmartPhoto.on('change',function(){
			console.log('图片更换时响应');
		});
		mySmartPhoto.on('swipestart',function(){
			console.log('滑动开始时响应');
		});
		mySmartPhoto.on('swipeend',function(){
			console.log('滑动结束时响应');
		});
		mySmartPhoto.on('zoomin',function(){
			console.log('图片放大时响应');
		});
		mySmartPhoto.on('zoomout',function(){
			console.log('图片缩小时响应');
		});
		*/

	});
</script>

说明：以上代码已被注释，如需要哪段代码请去掉注释即可。