Lightbox 2.5　のインストール

Lightboｘ とは、画像を別ウィンドウでなく、ウィンドウ内に表示するAjaxライブラリです。
Ver2.6 では、IE9でうまく動いてくれず、1つ前のバージョンでインストールしました。

  1. 公式サイトhttp://lokeshdhakar.com/projects/lightbox2/　から、rightbox　をダウンロードします。（その時点の最新バージョン）
    ※「Download」下の「 Lightbox」 のボタンをクリックします。
  2. ダウンロードしたファイル（ｚｉｐ）を解凍します。 次のようなファイルがフォルダに解凍されます。
    フォルダごと、使いたいページ（フォルダ）に移動（もしくはコピー）します。
    イメージ

JavaScript と CSSの読み込み

htmlファイルの、<head></head>内に、JavaScript と CSS を読み込む設定をします。
※使いたいページと同じフォルダに解凍したフォルダがあるものとします。別場所で使う場合は、パスが変わります。

<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700' rel='stylesheet' type='text/css'>

</body>の前あたりに次の2行を書きます。
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>

 

画像の挿入

画像を挿入し、リンク先に大きな画像を設定します。

大きな画像のほうにタグ rel="lightbox"　を設定します。

<a href="image/thumb/large/marguerite_3.jpg" rel="lightbox" >

<img src="image/thumb/marguerite3_thumb.jpg" alt="マーガレット" width="260" height="173"></a>

結果

こちらをクリックして、画像の上でクリックしてみてください。

 

Lightbox2(v2.7.1) のインストールと設定

※ 下記設定は、2015年5月にダウンロードしたファイルに基づいています。

  1. 公式サイトから、Lightbox2（v2.7.1） をダウンロードし、解凍します。
  2. 「css」「img」「js」フォルダを、使用するファイルと同じフォルダに置きます。
    ※別のフォルダに置く場合は設定を変える必要があります。
  3. ヘッダー内（head)に、次のファイルを指定します。（バージョンによって変わります）
    <link rel="stylesheet" href="./css/lightbox.css" type="text/css" media="screen" />
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
  4. 画像 が表示されない場合は、lightbox.cssで、参照する画像ファイルのパスが正しいかをチェックします。
    （prev.gif、next.gif、loading.gif、close.gif）

イメージに対応させる

  1. あらかじめサムネイル（小さい画像）を作っておき、大きい画像にリンクを設定します。
  2. リンク要素に「data-lightbox="lightbox"」を追加します。（大きいほうの画像）」を追加します。（大きいほうの画像）
  3. リンク要素に「data-title="画像の説明文を入力"」を追加します。タイトルが表示されます。