Lightboxを導入

画像をオーバーレイで拡大表示させるjavascript『Lightbox

ページ移動せずに画像を拡大して見れるようになったら便利だなあ、このブログでもそういうのできるのかなーと思い、やってみました。Lightbox系プラグインとしてさまざまな種類のスクリプトがあるようなのですが、ここはとりあえず本家の最新版を使ってみることにしました。

詳細で述べるように幾つか記述を変更する手間がかかりますが、これは類似のスクリプトでも必要な手順です。ここで紹介している方法は各画像のリンクタグに「rel="lightbox"」を挿入する必要があります。以下では自分のサイトのアドレスを例に説明していますので、適宜各々のサイトアドレスに置き換えて読んでください。

概要
zipをdownload
アップロードする場所を決める
seesaaで使うために必要な改変
HTMLの<head>にコードを挿入
実際に使用

公式サイトからdownload。
現在の最新版であるv2.51を利用します。ダウンロードしたzipは解凍して中身をアップロードします。zipの中にはlightbox2のデモページも含まれているので必要なファイルだけアップロードします。(デモページはhttp://lokeshdhakar.com/projects/lightbox2/と同じです。)

アップロードするファイルは、
cssフォルダ内の「lightbox.css」と、
jsフォルダ内の「jquery-1.7.2.min.js」, 「lightbox.js
imagesフォルダ内の「close.png」, 「loading.gif」, 「next.png」, 「prev.png」の画像ファイル4つ。

アップロードする場所を決める(決めてもまだアップロードはしないでください)
アップロードする場所ですが、私の場合はlightboxディレクトリを新たに作り、すべてアップロードしました。(seesaaブログの場合ファイルマネージャでディレクトリを作ります。)複数のディレクトリに分けることはせず、そこでまとめて管理することにしました。画像をimageディレクトリに入れてもいいです。またcssについては別ファイルではなく、ブログデザインに挿入する方もいるようです。そこら辺は自由に決めてください。
アップロードするディレクトリを決めると必要な改変が決まります。

seesaaで使う場合に必要な改変。
きちんと動かすためにはアップロードするファイルのアドレスを正しく指定しなければいけません。

seesaaブログはアップロードしたファイルの場所と実際のブログのアドレスが異なります。
このブログのアドレス:"http://eltransportador.seesaa.net/"
ファイルがある場所:"http://eltransportador.up.seesaa.net/lightbox/"
この違いがあるためseesaaブログでは絶対パスで場所を記述する必要があります。改変しなければならない場所はアップロードするファイルで4カ所、HTMLに挿入する分も含めると全部で7カ所あります。

変更が必要なファイルは2つ。「lightbox.js」と「lightbox.css
以下変更する箇所を列記します。
1.lightbox.js(2カ所)
LightboxOptions = (function() {

function LightboxOptions() {
this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}

LightboxOptions = (function() {

function LightboxOptions() {
this.fileLoadingImage = 'http://eltransportador.up.seesaa.net/lightbox/loading.gif';
this.fileCloseImage = 'http://eltransportador.up.seesaa.net/lightbox/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}
と変更します。上の方にあります。

2.lightbox.css(2カ所)
/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
background: url(../images/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
background: url(../images/next.png) right 48% no-repeat;
}

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
background: url(http://eltransportador.up.seesaa.net/lightbox/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
background: url(http://eltransportador.up.seesaa.net/lightbox/next.png) right 48% no-repeat;
}
に。

この2つのファイルを変更したらlightboxディレクトリにアップロードします。残りの画像とjqueryコードもアップロード。

次にHTMLにLightboxを使用する記述を加えます。
どういったコードを挿入するかはLightboxのサイトに説明が載っていて、
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
とあるのを
<script src="http://eltransportador.up.seesaa.net/lightbox/jquery-1.7.2.min.js"></script>
<script src="http://eltransportador.up.seesaa.net/lightbox/lightbox.js"></script>
に書き直してサイトのHTMLの<head>に挿入します。jqueryとlightboxの順番は変えないようにとのことです。

さらにcssについても
<link href="css/lightbox.css" rel="stylesheet" />
<link href="http://eltransportador.up.seesaa.net/lightbox/lightbox.css" rel="stylesheet" />
と書き直して<head>に挿入。
この3カ所を書き直して終了。

画像のリンクタグ内に「rel="lightbox"」を挿入すると動くと思います。
例:
<a href="http://eltransportador.up.seesaa.net/image/image-1.jpg" rel="lightbox" target="_blank"><img src="http://eltransportador.up.seesaa.net/image/image-1-thumbnail2.jpg" alt="image-1.jpg" border="0" height="206" width="250"></a>

グループ化は「rel="lightbox[グループ名]"」でできます。

最後に実際どのように動くか試してみます。
単独
image-1.jpg
グループグループ名:test
image-2.jpg
image-3.jpg
image-4.jpg

つぶやき:コードを載せるのって面倒ですね。


この記事へのコメント

  • jin

    はじめまして。

    現在当社のホームページ作成を任されておりまして、簡単に自分で更新できる「ブログでホームページ」というところで契約しております。以前はHP作成の専門の方に依頼しておりましたが中々こちらの想いが届かず現在に至っている状態なのですが、画像表示方法が好ましくなく、ポップアップできる表示がしたいと先方先に訪ねてみても範囲外ということで教えていただけませんでした。そこで自分なりに調べてみてたどり着いたのが「light box」でした。ですが根本的に理解していない当方にとって導入方法が全くわからない上、契約しているサーバーでこのlightboxの利用が可能なのかなどチンプンカンプンな状態ですので何かアドバイス頂けたら幸いです。
    宜しくお願い致します。
    2013年07月26日 10:04
  • 管理人

    jinさんはじめまして。

    基本的には上に書いた通りで、私はseesaaブログ以外使ったことがないので、契約されているサービスについて具体的なアドバイスをするのは難しいです。

    確かめるべき点があるとすれば

    1.ファイルのアップロードはできるのか
    2.に書き加えることはできるのか

    といったところでしょうか。これらができるのならば、おそらくLightboxの導入は可能なのではないでしょうか。あとは記事に書いてある内容をご自身の環境に当てはめて読んで頂ければ、できないことはないと思います。


    ただ、全くわからない方に無理に「がんばって」とは言えません。少なくとも、万が一ホームページ全体の表示がうまくいかなくなった場合に現状に戻す力量がないと厳しいです。慎重にご判断ください。

    ご期待に沿える回答ではなかったかもしれませんが、お役に立てれば幸いです。
    2013年07月26日 20:01