やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

lightbox

通常、小さい画像クリックすると大きい画像が表示される。この場合普通に画像だけが表示されるわけだけれど、このツールを使うと拡大画像に動きを持たせることができる。
◇ その為のテストページ
ギャラリーのイメージサンプルページ


■ 以下参考サイト
小粋空間: Lightbox JS で画像を表示する
LightboxJs ver2
「Lightbox JS v2.0の使い方と設置」/sb・Serene Bachブログ
の3サイト

ちなみに、ブログにも設置できっらしい。※はてなJavaScriptは動かないので設定できないけれど、ふつうにブログでも利用できるらしい(と、手順が書いてあった。)でも、多少の根性と勇気と、ほんの少しの最低限の知識が必要(と思われる)。


設定は簡単。参考サイトからLightboxJavaScriptファイルをダウンロード、そのほか必要なcssやらimages画像と共にサーバーにUP

  1. HTMLの<head>部分にlightboxのファイルをリンクさせる。
  2. サムネイルの画像に拡大画像へのリンクを張る。このときにrel="lightbox"を<a>タグの属性に追加※手順や方法は紹介サイトで詳しく紹介

・・・随分かいつまんだけど(笑)本当に比較的簡単にできるので試してみるとおもしろい。
ってことで紹介。