2021.09.10
OSS
祝日や休日の要素にclassを追加する AssignHoliday をリリースしました
スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか?
SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアー です。長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピンチアウトやダブルタップ等で直感的に閲覧することができます。もちろん、画面の大きなPCでも利用できます。
今回は JavaScript版 と jQuery版 を用意しました。
さらに、より多くの人に使ってもらえるように WordPress Plugin も準備を進めています。慣れない中で作っているので、これでいいのか分からない状況なので、ご意見ください。
https://appleple.github.io/SmartPhoto/ では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。
まずは、どのようなものなのか画像をクリックして体験してみてください。
もし、この記事を PC でご覧ということであれば、 QR コードを利用してスマートフォンでアクセスしてみてください。ジャイロセンサーでスマートフォンを傾けると画像を動かすことができる(ジャイロセンサーを利用しない設定も可能です)ようにもなっています。
<link rel="stylesheet" href="./css/smartphoto.min.css">
<script src="./js/smartphoto.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/smartphoto@latest/css/smartphoto.min.css">
<script src="https://unpkg.com/smartphoto@latest/js/smartphoto.min.js"></script>
拡大表示したい画像をaタグで囲み、そのaタグのhref属性に拡大画像のパスを設定します。キャプションを入れたい場合は、そのaタグに対して、data-caption属性を指定します。また、data-group属性に同じ値を設定することで画像をグルーピングして表示することも可能です。
<a href="https://appleple.github.io/SmartPhoto/assets/images/large-kuma.jpg" class="js-smartPhoto" data-caption="bear" data-id="bear" data-group="animal">
<img src="https://appleple.github.io/SmartPhoto/assets/images/kuma.jpg" />
</a>
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartPhoto");
});
また、jquery-smartphoto.jsを読み込むことで、jQueryのプラグインとしても使えるようにしています。
<link rel="stylesheet" href="./css/smartphoto.min.css">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./js/jquery-smartphoto.min.js"></script>
$(function(){
$(".js-smartPhoto").SmartPhoto();
});
画像の短編側ではなく、長編側を画面幅いっぱいに表示することも可能です。その場合、オプションで「resizeStyle:'fit'」を指定します。PCで閲覧時には違いはありませんが、スマートフォンで表示の際にスクリーンサイズに画像がFitする形で表示されます。
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartPhoto",{
resizeStyle:'fit'
});
});
arrows | 「前後リンク」を表示するかどうか | デフォルト:true |
nav | イメージナビゲーションを表示するかどうか | デフォルト:true |
useOrientationApi | 加速度センサーを使用するかどうか | デフォルト:true |
resizeStyle | スマホで閲覧時に画像サイズの短辺を画面幅に合わせる(fill)か、長編を画面幅に合わせる(fit)か | デフォルト:'fill' |
animationSpeed | 次の画像に遷移する際のアニメーションスピード | デフォルト:300 |
forceInterval | 画像の位置を更新する頻度 defaultは (10/1000秒)に一回 | デフォルト:10 |
下記のようにインスタンスを生成することで、そのインスタンスを通していくつかのメソッドを実行することが可能です。
var mySmartPhoto = new SmartPhoto(".js-smartPhoto-fit");
画像を拡大表示します
画像の拡大表示を終了します。
画像をグループ表示している際に、そのグループの1番目の画像に移動します。
ギャラリーに新たな画像を登録します。
$animation-speed | 次の画像に遷移する際のアニメーションのスピード | デフォルト:0.3s |
---|---|---|
$animation-function | アニメーションのイージング | デフォルト:ease-out |
$backdrop-color | 画像閲覧時の背景色 | デフォルト:rgba(0, 0, 0, 1) |
$header-color | 画像閲覧時のヘッダーの色 | デフォルト:rgba(0, 0, 0, .2) |
ダウンロードはこちらから行えます。
もしくは、npm、yarnを使ったインストールが可能です。
npm install smartphoto --save
yarn add smartphoto
npmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。
const smartPhoto = require('smartphoto');