HOME > >

Lightbox JS

Lightboxとは?

画像をレイヤー表示のようにカッチョよく開いてくれるスクリプト。チュートリアルとかに使うといいカンジ。色々とバージョンがあってスライドショーにできるものやrel属性無しでもOKなものなど色々と出回ってます。

Lightbox JS

恐らくコレが一番最初に世に出たもの?一番シンプルで使いやすいです。

lightbox JS サンプル

使い方

使い方はいたって簡単。javascriptファイルとcssファイルを読み込んで 表示画像へのリンクを作成。aタグに rel="lightbox"を追加するだけ。

HTML

  1. /* head 内でjavascriptファイルとCSSファイルの読み込み */
  2. <script type="text/javascript" src="lightbox.js"></script>
  3. <link href="lightbox.css" rel="stylesheet" type="text/css" />
  4.  
  5. /* aタグにrel="lightbox"属性の追加 */
  6. <a href="lightbox_01.jpg" rel="lightbox"><img src="lightbox_01.jpg" width="150" height="199" /></a>

Lightbox JS関連サイト

Lightbox JS v2.0

複数の画像をスライドショー形式で開くことができます。

参照サイト