2024.03.11
OSS
動画をモーダルウィンドウで表示する JavaScript ライブラリ modal-video.js の紹介
モバイルフレンドリーなイメージビューワー SmartPhoto.js の利用方法
スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ 2017年にリリースした SmartPhoto.js は、スマートフォンで写真を大きく見たいを実現するために用意したライブラリーです。
弊社の Github 公開しているライブラリの中では、一番 ★ の多いライブラリーで、2024年5月6日現在で 894 となっています。よろしければ https://github.com/appleple/SmartPhoto の右上にある ★ のクリックをお願いします。
SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアーとして作られました。下のデモコンテンツでは、長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピンチアウトやダブルタップ等で直感的に閲覧することができます。PCでご覧の方は QRコードを読み取ってスマートフォンでお試しください。
私が最初に考えた仕様としては、この上の状態がデフォルトで、この記事のリライト前にはオプションの resizeStyle は fill と書かれたままになっていましたが、随分前に fit がデフォルトになっています。どちらにしても、スマートフォンで画像を直感的に拡大してみることができるようなビューアーのライブラリとなっています。
デモ
こちらのデモでは、resizeStyle が Fit で現在のデフォルトの設定です。
特徴
- スマートフォンでの閲覧時、写真の短辺側が画面の最大になるところまで拡大表示（fill）させるか、長編を画面幅に合わせ拡大表示（fit）させる。
- ピンチイン、ピンチアウト、スワイプ、ドラッグ対応
- 画像のグルーピング機能
- キーボード対応
- URLハッシュによる画像の表示機能
使い方
CSS及びJavaScriptの読み込み
<link rel="stylesheet" href="./css/smartphoto.min.css">
<script src="./js/smartphoto.min.js"></script>CDNを利用した読み込み
<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>HTMLの記述
拡大表示したい画像を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>
JavaScript
<script>
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartPhoto");
});
</script>オプションの設定をする際には、
<script>
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartPhoto",{
resizeStyle:'fill'
});
});
</script>オプション
| オプション | 説明 | デフォルト |
|---|---|---|
| arrows | 「前後リンク」を表示するかどうか | true |
| nav | イメージナビゲーションを表示するかどうか | true |
| useOrientationApi | 加速度センサーを使用するかどうか | true |
| resizeStyle | スマホで閲覧時に画像サイズの短辺を画面幅に合わせる（fill）か、長編を画面幅に合わせる（fit）か | Fit |
| animationSpeed | 次の画像に遷移する際のアニメーションスピード | 300 |
| forceInterval | 画像の位置を更新する頻度 defaultは (10/1000秒）に一回 | 10 |
メソッド
下記のようにインスタンスを生成することで、そのインスタンスを通していくつかのメソッドを実行することが可能です。
var mySmartPhoto = new SmartPhoto(".js-smartPhoto-fit");mySmartPhoto.zoomPhoto();
画像を拡大表示します
mySmartPhoto.zoomOutPhoto();
画像の拡大表示を終了します。
mySmartPhoto.gotoSlide(1);
画像をグループ表示している際に、そのグループの1番目の画像に移動します。
mySmartPhoto.addNewItem(element);
ギャラリーに新たな画像を登録します。
SCSSのカスタマイズ
| $animation-speed | 次の画像に遷移する際のアニメーションのスピード | デフォルト：0.3s |
|---|---|---|
| $animation-function | アニメーションのイージング | デフォルト：ease-out |
| $backdrop-color | 画像閲覧時の背景色 | デフォルト：rgba(0, 0, 0, 1) |
| $header-color | 画像閲覧時のヘッダーの色 | デフォルト：rgba(0, 0, 0, .2) |
ダウンロード
今回の SmartPhoto は、レスポンシブデザインのウェブサイトでの利用を考えて作られた JavaScript ライブラリですが、弊社では他にも同様に便利に使えるライブラリを公開しております。よろしければ、そちらもご活用ください。
その他にも、https://github.com/appleple で多くのライブラリなどを公開しておりますので、合わせてご覧ください。また、弊社では有償にはなりますが、JavaScriptのライブラリ開発のお手伝いも行っておりますので、お気軽に お問い合わせフォーム からご相談ください。
ダウンロードはこちらから行えます。
もしくは、npm、yarnを使ったインストールが可能です。
npm install smartphoto --saveyarn add smartphotonpmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。
const smartPhoto = require('smartphoto');リンク
今回の SmartPhoto は、レスポンシブデザインのウェブサイトでの利用を考えて作られた JavaScript ライブラリですが、弊社では他にも同様に便利に使えるライブラリを公開しております。よろしければ、そちらもご活用ください。
その他にも、https://github.com/appleple で多くのライブラリなどを公開しておりますので、合わせてご覧ください。また、弊社では有償にはなりますが、JavaScriptのライブラリ開発のお手伝いも行っておりますので、お気軽に お問い合わせフォーム からご相談ください。
