Lightbox2 導入方法

画像ビューワーアプリケーション「Lightbox2」をFC2ブログに導入する方法です。

New スーパーマリオブラザーズ U

導入方法を備忘録として残します。

LightBox2
⇒http://lokeshdhakar.com/projects/lightbox2/

※現在Lightbox2は機能していません。

現在は「LightBox」の派生形である「Shadowbox」を導入しています。

LightBoxとは

  1. 「LightBox」は画像をレイヤー表示したり、複数枚をスライドショー表示できるアプリケーションです。

  2. 画像ビューワーとも呼ばれます。

  3. 現在はバージョンがv2.51となり、「LightBox2」となっています。

  4. このLightBoxから派生して、数々の画像ビューワーアプリケーションが誕生しており、それらはLightBox系と呼ばれています。

LightBox2導入方法

  1. FC2ブログへのLightBox2導入方法は下記を参照しました。

  2. アクアラングウエスタンver.9.2
    Lightbox2 (v2.51) 設置方法
    ⇒http://crabcancan.blog.fc2.com/blog-entry-195.html

  3. まずはアプリケーションをダウンロードします。

  4. LightBox2
    ⇒http://lokeshdhakar.com/projects/lightbox2/

  5. 執筆時におけるLightBox2の最新バージョンは V2.51

  6. [lightbox]フォルダの中にCSSフォルダ[css]、JavaScriptフォルダ[js]、画像フォルダ[images]があります。

  7. まず、画像フォルダ[images]から下記4種の画像をアップロードします。

    • close.png
    • loading.gif
    • next.png
    • prev.png
  8. アップロード先のパス(URL)をメモします。私の場合 http://blog-imgs-60.fc2.com/k/u/m/kumarajyu/***.png といったURLになりました。

  9. 次にCSS[lightbox.css]とJavaScript[lightbox.js]に含まれる画像のパスをアップロードしたものに書き換えます。

  10. 要注意ポイント1点目
    CSS[lightbox.css]、JavaScript[lightbox.js]それぞれに含まれる画像のパスを変更する。

  11. それぞれをメモ帳やワードパッドなどで開き、該当の箇所を探します。検索機能 [ctrl]+[F] で「.gif」「.png」を検索すると簡単に見つかります。

  12. CSS[lightbox.css]には[prev.png]と[next.png]が含まれてます。

  13. CSS[lightbox.css]の url(../images/prev.png) を url([アップロード先]/prev.png) というように書き換えます。

  14. 同様に url(../images/next.png) を url([アップロード先]/next.png) に書き換えます。

  15. JavaScript[lightbox.css]には[loading.gif]と[close.png]が含まれています。

  16. JavaScript[lightbox.js]の 'images/loading.gif'; を '[アップロード先]/loading.gif' というように書き換えます。

  17. 同様に 'images/close.png' を '[アップロード先]/close.png' に書き換えます。

  18. それぞれ書き換えた状態で保存しておきます。

  19. 要注意ポイント2点目
    FC2ブログのアップロード仕様ではファイル名にドット(.)を含められないので、ハイフン(-)などに変更する。

  20. JavaScriptフォルダ[js]内の下記ファイル名が該当します。

    • jquery-1.7.2.min.js
    • jquery.smooth-scroll.min.js
    • jquery-ui-1.8.18.custom.min.js
  21. 書き換えると下記のようになります。

    • jquery-1-7-2-min.js
    • jquery-smooth-scroll-min.js
    • jquery-ui-1-8-18-custom-min.js
  22. CSSフォルダ[css]とJavaScriptフォルダ[js]に入っているファイルをアップロードします。※上記で書き換えたファイルです。

  23. CSSファイル下記2点

    • lightbox.css
    • screen.css
  24. JavaScriptファイル下記4点

    • lightbox.js
    • jquery-1-7-2-min.js
    • jquery-smooth-scroll-min.js
    • jquery-ui-1-8-18-custom-min.js
  25. ブログのテンプレートの設定からHTMLを編集します。

  26. テンプレートのHTML編集用コード

    <!-- ▼▼▼ lightbox2.5 head 開始 ▼▼▼ -->
    <link href="[アップロード先]/lightbox.css" type="text/css" rel="stylesheet" media="all" />
    <script src="[アップロード先]/jquery-1-7-2-min.js" type="text/javascript"></script>
    <script src="[アップロード先]/lightbox.js" type="text/javascript"></script>
    <!-- ▲▲▲ lightbox2.5 head 終了 ▲▲▲ -->
    
  27. [アップロード先]を各自のものに変更してヘッド部分(分からなければ </head> の行の直前)に上記コードを記述する。※上記はハイフン変更仕様のもの。

  28. 記述したら更新・保存して終了する。

LightBox2仕様の記述方法

  1. 前提としてFC2ブログの環境設定で、投稿設定の[画像のリンク]を「 画像を記事に挿入する際に[元画像にリンクさせて]挿入」にしておくと便利。アルバムページからのリンクは不可

  2. 画像一枚ごとに機能させる場合、target="_blank" があれば削除し、rel="lightbox" を書き加える。もしくは置換する。

  3. サンプルコード

    <a href="画像URL" rel="lightbox">サムネイル画像やテキスト</a>
    
  4. 画像複数枚をセットにして機能させる場合、rel="lightbox[セット名]" と任意のセット名を記述。

  5. 画像はファイル名のソート順に表示されるので、画像ファイル名は[セット名001.jpg]などとナンバリングしておくと意図した順に表示できる。

  6. サンプルコード

    <a href="画像URL/セット名001.jpg" rel="lightbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名002.jpg" rel="lightbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名003.jpg" rel="lightbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名004.jpg" rel="lightbox[セット名]">サムネイル画像やテキスト</a>
    
  7. 画像を表示したときに解説文も一緒に表示させるなら、title="解説文" も追加して記述する。

  8. サンプルコード

    <a href="画像URL" title="解説文" rel="lightbox">サムネイル画像やテキスト</a>
    
  9. サンプルコード

    <a href="画像URL/セット名001.jpg" title="001の解説文" rel="lightbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名002.jpg" title="002の解説文" rel="lightbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名003.jpg" title="003の解説文" rel="lightbox[セット名]">サムネイル画像やテキスト</a>
    <a href="画像URL/セット名004.jpg" title="004の解説文" rel="lightbox[セット名]">サムネイル画像やテキスト</a>
    

LightBox2 スライドショーテスト

  1. ※これは「LightBox2」ではなく「ShadowBox」で表示されています。

  2. テスト用

    Nintendo Land モンスターハンター3 (トライ) G HD Ver FIFA 13 ワールドクラスサッカー マスエフェクト 3 -特別版- 鉄拳タッグトーナメント2 Wii U EDITION 無双OROCHI2 Hyper アサシン クリードIII ZombiU(ゾンビU) バットマン・アーカム・シティ アーマード・エディション NINJA GAIDEN 3 Razors Edge

LightBox系「Shadowbox」

  1. 当ブログではLightBox系と呼ばれている「Shadowbox」を導入しています。

  2. エボリアヌーメ
    Shadowbox を導入してみた
    ⇒http://kumarajyu.blog.fc2.com/blog-entry-435.html

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

コメントの投稿

非公開コメント


トラックバック


この記事にトラックバックする(FC2ブログユーザー)

ブログテンプレート必須編集項目4 LightBox系
LightBox系を導入する場合はブログテンプレートのHTMLを編集する必要があります。 LightBox系とは、画像をモーダルウィンドウで表示するプラグインです。 サムネイル画像等をクリックするとその拡大画像がWeb上にレイヤー表示されるものといえば分かるでしょうか。 例:サンプル画像 ブログに導入する方法は元祖エボリアヌーメで紹介していますので、そちらをご覧くださ...
ページ下部までご覧いただきありがとうございました。