別窓を開かずにその場クリックで拡大画像を表示する4つの方法(2ページ目)

その場で画像を拡大できる軽量スクリプトLightbox Plusの使い方

ここからは、スクリプトや画像パーツを含めても合計30～43KB程度で済み、HTMLへの追記量も少なく、jQueryのような外部ライブラリの読み込みが不要なスクリプトLightbox Plusの使い方をご紹介いたします。

最低限必要な解説は下記の1～3だけです。複数の拡大画像を連続表示できるようにしたり、複数のページから利用しやすくしたり、効果画像を重ねたりするなどのオプションについては、4以降の解説も続けてご覧下さい。

■必要な作業：
1. Lightbox Plusをダウンロードして、必要ファイルを抜き出す (このページ)
2. Lightbox Plusをアップロードする (p.3)
3. Lightbox Plusで拡大画像を表示するためのHTMLを記述する (p.4)

■オプション作業：
4. 複数の拡大画像を連続して表示できるように設定する記述方法 (p.5)
5. サイト内のどこからでも利用できるようにスクリプトをカスタマイズ (p.6)
6. 拡大縮小機能を無効にしたり、拡大画像の上に効果画像を重ねて表示する方法 (p.7)

 

Lightbox Plusのダウンロード

まずはLightbox Plus一式をダウンロードして、必要なファイルを抜き出しましょう。Lightbox Plusは、配布サイトである「SerendipityNZ Ltd.」内にある「Lightbox Plus」ページからダウンロードできます。ページを下の方へスクロールすると見える「DOWNLOAD」ボタンをクリックしてダウンロードして下さい。

本稿執筆時点では、「lightbox_sample.zip」というファイル名で配布されており、ファイルサイズは3.7MBでした。サンプル用の画像も含まれているためZIPファイルのサイズは大きいですが、スクリプト自体は小さなものです。

Lightbox Plusの内容 (必要なのはresourceフォルダのみ)

ダウンロードした「lightbox_sample.zip」ファイルには、Lightbox Plusの本体のほか、サンプル用のHTMLや画像ファイルも含まれています。 この圧縮ファイルを展開すると、中身は下図のような構成になっています。
 
sampleフォルダの中にあるindex.htmlファイルをブラウザで表示させると、Lightbox Plusの動作サンプルを見ることができます。fileフォルダ、tinyフォルダには動作サンプル用の画像が入っているだけですから、自サイト上でLightbox Plusを活用する際に必要なのは、resourceフォルダの中身だけです。
 

Lightbox Plusを使うために必要なファイル群

Lightbox Plusは、右図の合計10ファイルで構成されています。本体であるJavaScriptファイルが1つと、装飾を作るCSSファイルが1つ、各種ボタンなどを表示するための画像ファイルが8つです。

Lightbox Plusを使うために必要なファイルは、すべてresourceフォルダの中に入っています。 ですから、このフォルダを丸ごと自サイト上にアップロードすれば問題ありません。

■不要な3ファイルは取り除いても構わない
実は、resourceフォルダの中には、13個のファイルがあります。上記で示した10ファイルに加えて、右図に記載した不要なファイルも含まれています。不要なファイルをアップロードしたくなければ、取り除いておくと良いでしょう。取り除かなくても特に害はないので、面倒ならそのまま13ファイルをアップロードしても問題ありません。

まず、「jojo.css」と「sample.css」の2ファイルは不要です。

次に、スクリプトには、通常版の「lightbox_plus.js」(ソースが読みやすい)と、ミニ版の「lightbox_plus_min.js」(ソースが読みにくい代わりにサイズが小さい)があります。これらは、どちらか一方があれば十分です。カスタマイズのしやすさを考えると、通常版の「lightbox_plus.js」を使う方がおすすめです。これ以降の解説では、通常版のみを使って説明しています。

それでは次に、Lightbox Plusを自サイトへアップロードしましょう。