画像のリンクを開いた時にそのページ上でふわりと拡大されてプレビューできる機能って便利ですよね。
このインターフェースはLightboxと呼ばれていますが(元々はこの方法を広めたライブラリの名前?)、このサイトにも似たようなものをイチから作ってみました! (jQueryを使っているので1じゃなく8あたりからのスタートかもですが)

動作サンプル

こんな感じで動きます。
うにょーんと拡大して窓の幅に合わせて可変します。

いろんな解像度にもレスポンシブに

たくさん並べるとなにか強いられている気がする。なんでこの画像をサンプルにしたのか。個人的なものでfigcaptionタグにも対応
ホバーで表示された状態で窓のサイズを変えても問題なし。

これを実装ついでに、画像リンクのスタイルも少しいじりました。リンクのありなしで見た目が少し変わります。

リンクなしサンプル

実装してみて

Lightbox関連はライブラリの種類が豊富なので今まで既存のものを利用していましたが、今回は思い切って自作という道を選択。

画像や窓のサイズや余白、その他の要素の大きさから表示する位置を決めたり、動きなりをイロイロと試行錯誤。
JSファイルで圧縮しても約6KB。。。まだまだブラッシュアップは必要ですが面白かったです。
このブログ専用でつくったの配布予定はありませんが、こういうのをライブラリとして配布してる人は大変なんだろうなぁ。これからもお世話になります(´Д`)