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');});// 當照片改變時photo.on('change' ,function(){console.log('change');});// 滑動開始時photo.on('swipestart',function(){console.log('swipestart'); });// 滑動結束時photo.on('swipestart',function(){console.log('swipestart');});// 滑動結束時.on('swipeend',function(){console. log('swipeend');});//放大時photo.on('zoomin',function(){console.log('zoomin');}) ;// 縮小時photo.on('zoomout', function(){console.log('zoomout');});