Lightbox2導入設置方法

Lightbox2導入設置方法
Lightbox2導入設置方法

果報丸
果報丸

画像が拡大ポップアップするサイトってあるよね。
あれってどうしてるんだろう?

管理人まあこ
まあこ

うん、あれは拡大ポップアップさせるJQueryプラグインを
使っているみたいよ。

果報丸
果報丸

JQueryプラグインってのがあるんだ。

管理人まあこ
まあこ

そうよ、じゃあ今回はJQueryプラグインのLightbox2
ご紹介していこうかな。

fav-folder-dynamic-premium.png 1,Lightbox2について

Lightbox2についてご紹介していきます。
Lightbox、およびLightbox2とは、モーダル・ダイアログ()を使用することでイメージ(写真や画像)を大きく表示するのに使用されるJavaScriptアプリケーションのことです。つまり、JavaScriptのライブラリを使用して、ブログに貼り付けられた写真や画像がクリック(タップ)されると、拡大画像が表示できるモーダルウィンドウが作れるJQueryのプラグインなんですね。
モーダルダイアログ:ダイアログボックスを閉じるまでは、同じアプリケーションの他のウィンドウに対する操作ができないダイアログボックスのこと。

Lightbox2はMITライセンスなので商用利用可能です。公開、配布、変更なども可能ですが、著作権表示とライセンス表示が必要ですので、ダウンロードしたソースコード内の著作権とライセンス表示を消さずにお使いくださいね。
サイトへの導入設置も比較的簡単で、JavaScriptとCSSのファイルをダウンロードするだけであっという間に使うことができます。わたしのようなJQueryの初心者でも、簡単に導入設置できちゃったので、このブログにも設置しています。
だから、写真や画像を見つけたらクリックしてみてくださいね。

fav-folder-dynamic-premium.png 2,LightBox2を導入設置する手順について

それでは、ここからはブログにLightBox2を導入設置するための手順をご紹介していきますね。ちなみにわたしはFC2ブログを使っているので、FC2ブログの手順を記載していきます。 他のブログを使っている方は、若干、手順が異なると思いますが、流れはあまり変わらないと思うので参考にしてくださいね。

Attention

テンプレートを少し変更するので、事前に必ずテンプレートのバックアップを取っておいてください!!

flash-dynamic-premium.png2-1,Lightbox2のダウンロード

まず次のリンクをクリックしてLightbox2のサイトを開いてください。


entry-5-02.jpg

Lightbox2のサイトが開き、GITHUBをクリックすると次のような画面になります。

entry-5-03.jpg

Codeをクリックし、一番下のDownload ZIPをクリックしてLightbox2をダウンロードしてください。

flash-dynamic-premium.png2-2,ファイル名を変更

ダウンロードしたzipファイルを解凍してください。解凍したフォルダの中には、たくさんのファイルがありますが、必要なファイルはこの中の6つのファイルだけです。
まず1つめは、lightbox2\dist\jsフォルダの中にあるlightbox-plus-jquery.min.jsのファイル名を次のように変更してくださいね。

entry-5-04.jpg

変更前 lightbox-plus-jquery.min.js
         ↓↓
変更後 lightbox-plus-jquery-min.js

つまり拡張子を除いたファイル名部分の"."(ピリオド)を"-"(ハイフン)に変更するという事です。

flash-dynamic-premium.png2-3,4つのファイルをアップロード

続いてlightbox2\dist\imagesフォルダの以下の4つのファイル

entry-5-05.jpg

をブログにアップロードし、アップロードした各ファイルのアップロード先URLをメモ帳などにメモしておいてくださいね。
close.png
loading.gif
next.png
prev.png

flash-dynamic-premium.png2-4,テキストエディタでURLを書き換え

次に lightbox2\dist\cssフォルダの lightbox.cssをテキストエディタで開いてください。

entry-5-06.jpg

lightbox.cssファイル内に上記でアップロードした4つのファイル(close.png、loading.gif、next.png、prev.png)のURLを指定している行がありますのでそのURLをアップロード先URLに書き換えてくださいね。
テキストエディタは何でもいいです。だいたいのテキストエディタには、検索機能があると思うので(close.png、loading.gif、next.png、prev.png)を検索して書き換えてください。

変更前

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(background: url(../images/prev.png) left 48% no-repeat;
) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

変更後

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(https://blog-imgs-166.fc2.com/m/a/a/maakochannel/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

この例では5行目のurl()内が書き換わっています。このように4つのURLを書き換えてください。URLの書き換えが終了すれば上書き保存します。

flash-dynamic-premium.png2-5,CSSとjQueryをアップロード

ファイル名を変更したファイル「lightbox-plus-jquery-min.js」とURLを書き換えた「lightbox.css」をブログにアップロードし、各ファイルのアップロード先URLをこれもメモ帳などにメモしておいてください。

flash-dynamic-premium.png2-6,CSSとjQueryの読み込み

最後にブログのテンプレート設定画面を開き、ブログテンプレートの<head>~</head>内に以下のHTMLを追記しCSSを読み込みます。

<link rel="stylesheet" href="http://XXXX/lightbox.css">

ブログテンプレートの</body>の前に以下のHTMLを追記しjQueryを読み込みます。

<script src="http://XXXX/lightbox-plus-jquery-min.js"></script>

変更したテンプレートの内容を[更新]して保存し、これでブログへのLightbox2を導入設置する手順は終了です。

fav-folder-dynamic-premium.png 3,Lightbox2の適用方法について

写真や画像にLightbox2を適用するには、<a>タグの中に「data-lightbox="〇〇〇"」を指定します。〇〇〇には任意の名称なので、「aaaaa」でも「bbb」でも何でも好きな文字を入れてください。ちなみにわたしは、「data-lightbox="group"」にしています。

変更前

<a href="https://blog-imgs-166.fc2.com/m/a/a/maakochannel/entry-5-02.jpg" target="_blank"><img src="https://blog-imgs-166.fc2.com/m/a/a/maakochannel/entry-5-02.jpg" alt="entry-5-02.jpg" width="1000" height="423" /></a>

変更後

<a href="https://blog-imgs-166.fc2.com/m/a/a/maakochannel/entry-5-02.jpg" data-lightbox="group"><img src="https://blog-imgs-166.fc2.com/m/a/a/maakochannel/entry-5-02.jpg" alt="entry-5-02.jpg" width="1000" height="423" /></a>

また、同じページ内に複数の写真や画像がある場合、「data-lightbox="〇〇〇"」を統一することでスライドショーのように、連続で複数の写真や画像の拡大ポップアップを表示することが可能になります。

以上、順を追ってご紹介してきましたが、ブログには画像を多く添付することが多いので、写真や画像が拡大ポップアップされると訪問者の方々も見易いと思います。Lightbox2をまだ導入されていない方は、是非、導入してみてくださいね。

この情報がお役に立てばブログランキングの応援お願いします。
にほんブログ村 ネットブログ Vtuber にほんブログ村 ネットブログ YouTube 人気ブログランキング Windows

最後までご覧頂き、ありがとうございます。わたしと果報丸の自己紹介です。今後ともよろしくお願い致します。

この記事を書いた人
管理人まあこ
まあこ

動画編集勉強中の超初心者です。勉強して理解した内容を、このサイトに記載していこうと思います。もし、誤りなどあれば教えてくださいね。(笑)
【職業】:看護師(ナース)
【居住地】:関西

この記事を書いた人
果報丸
果報丸

ボク、果報丸(かほうまる)って言います。実際の画像は、ブログ右上の写真です。いつもやんちゃなことをして、まあこちゃんに叱られています。これからもよろしくニャン。
【職業】:猫(まあこちゃんのペット)
【居住地】:関西(まあこちゃん家)

スポンサーサイト