SmartPhotoダウンロード - SmartPhotoソースコードのダウンロード

SmartPhoto

その他のソースコード

v1.6.5

ダウンロード

スマートフォト

特にモバイルデバイス向けの最も使いやすいレスポンシブ画像ビューア

完全なドキュメントとデモについては、https://apple.github.io/SmartPhoto/ を参照してください。
あなたが日本人の場合は、代わりにこちら https://www.appleple.com/blog/javascript/smartphoto-js.html を参照してください。

特徴

ピンチイン/ピンチアウト/ドラッグ/スワイプなどの直感的なジェスチャ
加速度計を使用して画像を移動する
キーボードやスクリーンリーダーからアクセス可能
URL ハッシュを使用して画像を表示する
写真グループを作成できる

インストール

npm
スタンドアロン

npm経由

npm installsmartphoto --save

または糸

糸スマートフォトを追加

使用法

必要とする

const SmartPhoto = require('smartphoto');

スマートフォト.js

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

jquery-スマートフォト.js

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

基本的なスタンドアロンの使用法

オプション

変数	説明	デフォルト
矢印	前/次の矢印	真実
ナビ	下部のナビゲーション画像	真実
useOrientationApi	加速度センサーを使用して画像を移動する	真実
サイズ変更スタイル	画面に収まるように画像のサイズを変更する	'埋める'
アニメーション速度	画像切り替え時のアニメーション速度	300
力の間隔	画像に力を加える頻度	10

パーツを隠す

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

フィット/フィルオプション

画像をフィット/フィルに合わせて拡大縮小するかどうかを選択できます

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

イベント

// モーダルが開いたときphoto.on('open',function(){console.log('open');});// モーダルがclosedphoto.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');} );

SCSS

変数	説明	デフォルト
$アニメーション速度	画像切り替え時のアニメーション速度	.3秒
$背景色	画像表示時の背景色	rgba(0, 0, 0, 1)
$ヘッダーの色	ヘッダーの色	rgba(0, 0, 0, .2)