LightboxからPhotoSwipeに乗り換え

当サイトはHTML5やCSS3、レスポンシブデザインに対応するなど時代の流れに沿ってきた中、画像の拡大表示には依然としてLightboxを使ってきました。
ここだけはずっとデザインを初期から変えてなかったいなかったのですが、「時代遅れなのでは?」と最近考えるようになり、色々と同じようなスクリプトを漁っていました。
そこで見つけたのがPhotoSwipeというスクリプトです。

スポンサーリンク

Lightboxよりモダンなデザインと表示の仕方じゃないでしょうか。
スマホでの操作がしやすいようにタッチジェスチャーに対応しています。

「これはいい!」と思って早速導入してみようと思ったのですが、まだWordpressのプラグインとしてしっかりしたものはないようでした。
そこでちょっとでも楽をしようと調べたらjQueryプラグイン化している方がいらっしゃったので、それを拝借して使うことにしました。

プラグイン化していると簡単に導入できるのでありがたいです。
中のPhotoSwipeのスクリプトは最新版に置き換えました。

表示する部分を指定して、適当にオプションを設定するだけで完成です。
あまりに大量の要素を指定すると、当たり前ですがかなり重いです。
上手にセレクタを記述しましょう。

下の画像は確認用の画像です。
PhotoSwipe確認用 サンプル画像
Lightboxより機能も充実しててモダンな感じが好きです。

標準ではa要素のtitle属性がキャプションになるのですが、このサイトでは残念ながらa要素にtitle属性はほとんどついていません。
そこで、img要素のalt属性をキャプションした方がいいと思ったのですが、これを実装するのが結構大変でした。
また機会があればその方法について紹介しようと思います。
もしかしたら簡単な方法が存在するかもしれませんけどね・・・

スポンサーリンク

Leave a Comment