loading
Loading photos

前橋市のまつり・イベント

 
Photo by 前橋観光コンベンション協会提供

サムネイル表示で、一覧中の画像をクリックすると拡大表示されて、写真めくりが出来ます。

Tips.

この手の機能で有名なLightbox2ではなく、Luminous Lightboxという類似ツールを試しました。
Luminous Lightboxを選択した理由はjQueryに依存していないからです。

落書き人の浅はかな知識で苦労したのは写真を中寄せで一覧表示させることでした。
最初は写真の縮小表示フィットが楽な背景で対応してみたのですが、最終的にはCSSプロパティのobject-fitを知り前景表示で思い通りに表示できました。

ブラウザ動作確認状況

Chrome: OK
Firefox: OK
Safari: たぶんcssの「object-fit: contain;」が怪しいかも