Fancyboxを無料で使うたった一つの方法
adiary組み込みのLightbox2で画像をズームできないことに不満があり、代替を探していてFancyboxという非常に素晴らしい画像スライドツールを見つけたのだが、なんと有料で頭を抱えてしまった。
そこで何とかして無料で同等の機能を実現する方法がないか調べてみた。結論としてはFancybox v3.5.7を使えばよい。
欲しいもの
- 複数ギャラリー対応
- ギャラリーグループの識別が要素単位で可能
- 親タグでグループ化する方式はNG
- ドラッグ・スワイプで前後の画像に切り替えられる
- 違和感なく前後の画像に切り替えられる
- Mastodonみたいに切り替えしようとして閉じない
- UIがガタついて戻ってきたりしない
- キーボード操作をサポート
- 画面サイズより小さい画像は原寸表示
- 画面サイズより大きい画像はアスペクト比を保って縮小
- 縮小した画像をクリック・タップすると拡大・縮小
- 拡大してはみ出た画像をドラッグ可能
- 拡大した画像をドラッグした時に画面から逸脱しない
- 自動でキャプションが出せる
- 非商用利用であれば無料
- 力業で再現させるようなコードが不要
ライブラリ別まとめ
凡例
✅:要件を完全に満たす
⚠️:要件は満たさないが、類似機能がある
❌:要件を満たさない
➖:調べていない
基本的に設定を書くだけか、簡単なスクリプトで実現できるもののみ要件を満たすものとして定義している。また明らかに機能不足で興味が余り湧かなかったものは深く調べていないので情報が間違っている可能性がある。
機能 | Lightbox2 | GLightbox | PhotoSwipe | Viewer.js | Spotlight.js | lightGallery | Fancybox v6 | Fancybox v3.5.7 |
---|---|---|---|---|---|---|---|---|
クリック・タップで拡大・縮小 | ❌ | ✅ | ✅ | ❌ | ❌ | ⚠️ | ✅ | ✅ |
複数ギャラリー対応 | ✅ | ✅ | ❌ | ➖ | ➖ | ✅ | ✅ | ✅ |
ギャラリーの識別が要素単位で可能 | ✅ | ✅ | ❌ | ➖ | ➖ | ❌ | ✅ | ✅ |
ドラッグ・スワイプで前後の画像に切り替えられる | ❌ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ |
違和感なく前後の画像に切り替えられる | ❌ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ |
キーボード操作のサポート | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
画面サイズより小さい画像は原寸表示 | ✅ | ✅ | ❌ | ✅ | ❌ | ➖ | ✅ | ✅ |
画面サイズより大きい画像はアスペクト比を保って縮小 | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ |
拡大してはみ出た画像をドラッグ可能 | ❌ | ✅ | ✅ | ➖ | ✅ | ✅ | ✅ | ✅ |
拡大した画像をドラッグした時に画面から逸脱しない | ❌ | ❌ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ |
自動でキャプションが出せる | ✅ | ✅ | ⚠️ | ✅ | ➖ | ➖ | ✅ | ✅ |
非商用利用無料 | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ |
複雑なコードが不要 | ✅ | ⚠️ | ❌ | ➖ | ➖ | ➖ | ✅ | ✅ |
各ライブラリを触ってみた雑感
Lightbox2
拡大機能がないため論外。
GLightbox
画像を開いてからウィンドウを縮小したときにズームできないのが最大の難点。またこのブログに埋め込んだ時、ドラッグで画像を左右に送ろうとしたら妙なガタツキが見られた。
また画像をドラッグすると画面外まで飛んでいくのも、あまり良くない。
他にもUIがカスタマイズ可能なのはいいが、逆に面倒である。
PhotoSwipe
全体的にコールバック関数にフックして自前で実装する要素が色濃く、実装の手間が甚大にかかる。
Lightbox2にあるようなdata-lightbox=<gallary-id>
を使ったギャラリーのグループ化が困難で、フルスクラッチでコードを書く必要があるが、Claude Opus 4.1とGPT-5に書かせて上手く行かなかったので諦めた。
lightGallery
一見するとよさそうだが、有料なので論外。
画像切り替え時にロードが入ることや、ドキュメントが読みづらく何が出来るのかイマイチ判らなかったのもマイナス。
Viewer.js
UIが独特的過ぎてみた瞬間論外だったが一応…。
PCではクリック・ドラッグで画像送りできないのがマイナスで、スマホではタップ・スワイプで可能という新しいアプローチが採用されており、開いた画像は画面内のどこにも自在配置できる機能もあった。
要するに完全に要件外だった。
Spotlight.js
アスペクト比によって画像が見切れるほか、小さい画像が全画面表示されて見づらかった。