LightBox2

「Lightbox 2」は、ブログに張り付けた画像がクリックされると、クールなポップアップ画面で表示してくるJavascriptのライブラリを使用した特殊効果。

単にポップアップ表示するだけでなく、複数の画像をグループ化してポップアップしたままスライドショーのように表示することもできる。

「LightBox2」を使用した特殊効果のデモを以下のブログに用意したので実際の動作を確認したい方は以下のブログを参照してください。

「FC2ブログ特殊効果:LightBox2のデモ」

以下FC2ブログに「Lightbox2」を導入する方法について記載します。
スポンサードリンク


FC2ブログにLightBox2を設置する手順

以下にFC2ブログにLightBox2を設置するための手順を記載します。

ブログのテンプレートを少し変更するので、手順を実施する前に複製を取ってバックアップをしておきましょう。

  1. 以下のリンクをクリックして「Lightbox2」のサイトをブラウザで開きます。

    LightBox

  2. [DOWNLOAD]をクリックして「LightBox2」をダウンロードします。

  3. ダンロードしたファイルを解凍します。

  4. 解凍したフォルダの以下のファイルのファイル名を変更します。

    変更前:lightbox2-master\dist\js\lightbox-plus-jquery.min.js
    変更後:lightbox2-master\dist\js\lightbox-plus-jquery-min.js

    ※拡張子を除いたファイル名部分の"."(ピリオド)を"-"(ハイフン)に変更する

  5. "lightbox2-master\dist\images"フォルダの以下の4つのファイルをブログにアップロードし、アップロードした各ファイルのアップロード先URLをメモ帳などにコピーしておきます。

    close.png
    loading.gif
    next.png
    prev.png

  6. "lightbox2-master\dist\css"フォルダの"lightbox.css"をテキストエディタで開きます。

  7. "lightbox.css"ファイル内に上記でアップロードした4つのファイル(close.png、loading.gif、next.png、prev.png)のURLを指定している行がありますのでそのURLをアップロード先URLに書き換えます。

    わかりづらいかもしれないので2つほど変更例をいかに記載しておきます。

    変更前
    /* Preload images */
    body:after {
      content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
      display: none;
    }
    
    変更後
    /* Preload images */
    body:after {
      content: url(http://blog-imgs-82.fc2.com/l/a/b/lab319/close.png) url(http://blog-imgs-82.fc2.com/l/a/b/lab319/loading.gif) url(http://blog-imgs-82.fc2.com/l/a/b/lab319/prev.png) url(http://blog-imgs-82.fc2.com/l/a/b/lab319/next.png);
      display: none;
    }
    

    変更前
    .lb-cancel {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto;
      background: url(../images/loading.gif) no-repeat;
      }
    
    変更後
    .lb-cancel {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto;
      background: url(http://blog-imgs-82.fc2.com/l/a/b/lab319/loading.gif) no-repeat;
      }
    

    URLの書き換えが終了したら上書き保存します。

  8. ファイル名を変更したファイル"lightbox-plus-jquery-min.js"とURLを書き換えた"lightbox.css"をブログにアップロードします。

    ファイルのアップロード方法の詳細については以下の記事を参考にしてください。
  9. 上記でアップロードした2つのファイルのアップロード先URLをメモ帳などにコピーしておきます。

  10. ブログのテンプレート設定画面を開きます。

  11. ブログテンプレートの<head>~</head>の任意の行に以下のHTMLを追記します。
    <link rel="stylesheet" href="http://XXXX/lightbox.css">

    ※"href="に指定するURLは、メモ帳にコピーしておいた"lightbox.css"のURLを指定します。

  12. ブログテンプレートの</body>の手前に以下のHTMLを追記します。
    <script src="http://XXXX/lightbox-plus-jquery-min.js"></script>

    ※"href="に指定するURLは、メモ帳にコピーしておいた"lightbox-plus-jquery-min.js"のURLを指定します。

  13. 変更したテンプレートの内容を[更新]ボタンをクリックして保存します。

これでブログへの「LightBox2」を設置する手順は終了です。

画像にLightBox2の特殊効果を適用する方法

実際にブログにアップした画像をLightBox2で表示するためには、<a>タグの中に「data-lightbox="任意の名前"」を指定します。

また、「data-title="タイトル文字列"を一緒に指定すると任意の文字をポップアップした画面の左下に表示することができます。

以下にLightBox2を使う際のHTML例を記載します。

画像を1つだけ使った場合

HTMLの例
この例では、「data-lightbox=」に"demo-1"という名前を指定しています。
<a href="http://画像のURL" data-lightbox="demo-1" data-title="タイトル文字列">...</a>

複数の画像をスライドショーのように見せる場合

HTMLの例
この例では、4つの画像の「data-lightbox=」に"group-1"という同じ名前を指定してグルーピングしています。

同じ名前が指定されている場合はスライドショーのように表示されます。
<a href="http://画像のURL1" data-lightbox="group-1" data-title="画像1のタイトル文字列">...</a>
<a href="http://画像のURL2" data-lightbox="group-1" data-title="画像2のタイトル文字列">...</a>
<a href="http://画像のURL3" data-lightbox="group-1" data-title="画像3のタイトル文字列">...</a>
<a href="http://画像のURL4" data-lightbox="group-1" data-title="画像4のタイトル文字列">...</a>

LightBox2のオプション

LightBox2には実行時に特殊効果のオプションを指定して実行することができます。

オプションを指定した実行方法等の詳細については、公式サイトを参照してください。

LightBox2のデモ

HTMLの記載方法と実際にLightBox2でどういうふうに表示されるかは以下のサイトにデモを用意してあるのでそちらを参照してください。
スポンサードリンク

  

関連記事