Lightbox2導入設置方法
画像が拡大ポップアップするサイトってあるよね。
あれってどうしてるんだろう？
うん、あれは拡大ポップアップさせるJQueryプラグインを
使っているみたいよ。
JQueryプラグインってのがあるんだ。
そうよ、じゃあ今回はJQueryプラグインのLightbox2を
ご紹介していこうかな。
1,Lightbox2について
Lightbox2についてご紹介していきます。
Lightbox、およびLightbox2とは、モーダル・ダイアログ（※）を使用することでイメージ（写真や画像）を大きく表示するのに使用されるJavaScriptアプリケーションのことです。つまり、JavaScriptのライブラリを使用して、ブログに貼り付けられた写真や画像がクリック（タップ）されると、拡大画像が表示できるモーダルウィンドウが作れるJQueryのプラグインなんですね。
※モーダルダイアログ：ダイアログボックスを閉じるまでは、同じアプリケーションの他のウィンドウに対する操作ができないダイアログボックスのこと。
Lightbox2はMITライセンスなので商用利用可能です。公開、配布、変更なども可能ですが、著作権表示とライセンス表示が必要ですので、ダウンロードしたソースコード内の著作権とライセンス表示を消さずにお使いくださいね。
サイトへの導入設置も比較的簡単で、JavaScriptとCSSのファイルをダウンロードするだけであっという間に使うことができます。わたしのようなJQueryの初心者でも、簡単に導入設置できちゃったので、このブログにも設置しています。
だから、写真や画像を見つけたらクリックしてみてくださいね。
2,LightBox2を導入設置する手順
それでは、ここからはブログにLightBox2を導入設置するための手順をご紹介していきますね。ちなみにわたしはFC2ブログを使っているので、FC2ブログの手順を記載していきます。 他のブログを使っている方は、若干、手順が異なると思いますが、流れはあまり変わらないと思うので参考にしてくださいね。
● テンプレートを少し変更するので、事前に必ずテンプレートのバックアップを取っておいてください！!
2-1,Lightbox2のダウンロード
まず次のリンクをクリックしてLightbox2のサイトを開いてください。
【Lightbox2】
Lightbox2のサイトが開き、GITHUBをクリックすると次のような画面になります。
Codeをクリックし、一番下のDownload ZIPをクリックしてLightbox2をダウンロードしてください。
2-2,ファイル名を変更
ダウンロードしたzipファイルを解凍してください。解凍したフォルダの中には、たくさんのファイルがありますが、必要なファイルはこの中の6つのファイルだけです。
まず1つめは、lightbox2\dist\jsフォルダの中にあるlightbox-plus-jquery.min.jsのファイル名を次のように変更してくださいね。
変更前 lightbox-plus-jquery.min.js
↓↓
変更後 lightbox-plus-jquery-min.js
つまり拡張子を除いたファイル名部分の"."(ピリオド)を"-"(ハイフン)に変更するという事です。
2-3,4つのファイルをアップロード
続いてlightbox2\dist\imagesフォルダの以下の4つのファイル
をブログにアップロードし、アップロードした各ファイルのアップロード先URLをメモ帳などにメモしておいてくださいね。
● close.png
● loading.gif
● next.png
● prev.png
2-4,テキストエディタでURLを書き換え
次に lightbox2\dist\cssフォルダの lightbox.cssをテキストエディタで開いてください。
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の書き換えが終了すれば上書き保存します。
2-5,CSSとjQueryをアップロード
ファイル名を変更したファイル「lightbox-plus-jquery-min.js」とURLを書き換えた「lightbox.css」をブログにアップロードし、各ファイルのアップロード先URLをこれもメモ帳などにメモしておいてください。
2-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を導入設置する手順は終了です。
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をまだ導入されていない方は、是非、導入してみてくださいね。
最後までご覧頂き、ありがとうございます。わたしと果報丸の自己紹介です。今後ともよろしくお願い致します。
動画編集勉強中の超初心者です。勉強して理解した内容を、このサイトに記載していこうと思います。もし、誤りなどあれば教えてくださいね。(笑)
【職業】：看護師（ナース）
【居住地】：関西
ボク、果報丸（かほうまる）って言います。実際の画像は、ブログ右上の写真です。いつもやんちゃなことをして、まあこちゃんに叱られています。これからもよろしくニャン。
【職業】：猫（まあこちゃんのペット）
【居住地】：関西（まあこちゃん家）
