おお、これは使いどころが多そうですね。 Webサイトでは最初画像は小さく、クリックすると大きく表示するといった処理が良く行われます。この時のライブラリとして有名なのはColorboxでしょう。しかし他にも様々なライブラリが存在します。 今回はZoomerang.jsというライブラリを紹介します。特徴としては画像だけでなくテキストにも使えること、さらにスクロールしても追従してくれる点になります。

最初の表示。画像とテキストが並んでいます。段々になっているところはクリッカブルです。

クリックするとサムネイルから拡大して表示されます。周囲は暗くなります。

テキストにも使えます。

幅を変更したり、スクロールしても画像はウィンドウ中央に収まるようになっています。

もっとも簡単な使い方はIDを指定する方法です。

Zoomerang.listen('#my-image')

設定として、背景色や透明度、最大の幅と高さ、アニメーションの指定ができます。クリック時にアニメーションしながら拡大するので、目を引きますし、周囲の色を変えることでその画像だけをぐっと目立たせることができるでしょう。

Zoomerang.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Zoomerang.js yyx990803/zoomerang