「Lightbox」を利用して画像を"かっこよく"表示する
ウェブ上で、画像を"かっこよく"表示する方法を紹介します。
サムネイル画像をクッリクすると、オリジナル画像がページ全体に開きます。
実際の動作は、こちら
で確認してください。
このような、表示方法を簡単に可能にしてくれるのが、ライブラリの「Lightbox」です。
以下で、導入に仕方と利用方法について説明します。
(1)インストール
「Lightbox」のサイトから、「Lightbox」のライブラリをダウンロードしてきます。
ダウンロードしたファイルを解凍して、適当なディレクトリに配置してください。
(2)コーディング
今回は、「Filickr」で提供されている画像を素材として利用させてもらいました。
「Filickr」で提供されている画像では、ひとつの画像に対してさまざまなサイズが用意されているものがあります。
小さいサイズの画像を、サムネイル画像として、大きなサイズの画像を表示用画像として
利用します。
以下に、そのコードを示します。
「Lightbox」を利用すれば、ウェブ上で、お気に入りの写真や絵を集めて紹介したり、個展を開いたりといったことが簡単にできそうです。
