ダウンロードと設定

  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"」を追加します。(大きいほうの画像）
    例：<a href="images/large/image.jpg" data-lightbox="lightbox" data-title="御殿場インター">ここには小さい画像</a>
  3. リンク要素に「data-title="画像の説明文を入力"」を追加します。タイトルが表示されます。