画像をオーバーレイで拡大表示させる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[グループ名]"」でできます。
最後に実際どのように動くか試してみます。
単独
グループグループ名:test
つぶやき：コードを載せるのって面倒ですね。
posted by the ruler at 13:07
|
Comment(0)
|
日記
