SmartPhoto下载 - SmartPhoto源码下载

SmartPhoto

其他源码

v1.6.5

下载

智能照片

最易于使用的响应式图像查看器，尤其适用于移动设备

请参阅 https://apple.github.io/SmartPhoto/ 了解完整的文档和演示
如果您是日本人，请参阅此处 https://www.appleple.com/blog/javascript/smartphoto-js.html。

特征

直观的手势，例如捏合/捏合/拖动/滑动
使用加速计移动图像
可通过键盘和屏幕阅读器访问
通过 URL 哈希显示图片
可以制作照片组

安装

新项目管理
独立的

通过 npm

 npm 安装 smartphoto --保存

或纱线

纱线添加智能照片

用法

要求

const SmartPhoto = require('smartphoto');

智能照片.js

 document.addEventListener('DOMContentLoaded',function(){new SmartPhoto(".js-smartphoto");});

jquery-smartphoto.js

 $(function(){$(".js-smartphoto").SmartPhoto();});

基本独立使用

选项

多变的	描述	默认
箭头	上一个/下一个箭头	真的
导航	底部导航图片	真的
使用OrientationApi	使用加速度计移动图像	真的
调整大小样式	调整图像大小以填充/适合屏幕	'充满'
动画速度	切换图像时的动画速度	300
力间隔	对图像施加力的频率	10

隐藏零件

document.addEventListener('DOMContentLoaded',function(){new SmartPhoto(".js-smartphoto",{arrows: false,nav: false});});

适合/填充选项

您可以选择是否要缩放图像以适合/填充

document.addEventListener('DOMContentLoaded',function(){
  新的 SmartPhoto(".js-smartphoto",{ resizeStyle: 'fit'
  });});

事件

// 当模态打开时photo.on('open',function(){console.log('open');});//当模态关闭时photo.on('close',function(){console.log( 'close');});// 当所有图片加载完时 photo.on('loadall',function(){console.log('loadall');});// 当照片加载完时Changedphoto.on('change',function(){console.log('change');});// 滑动开始时photo.on('swipestart',function(){console.log('swipestart');} );// 滑动结束时 photo.on('swipeend',function(){console.log('swipeend');});// 缩放时inphoto.on('zoomin',function(){console.log('zoomin');});//缩小时photo.on('zoomout',function(){console.log('zoomout');} ）；