その場で画像を拡大できる定番スクリプト「Lightbox」の使い方

移動したりポップアップしたりすることなく、その場で拡大画像を表示できるスクリプトは多数ある

移動したりポップアップしたりすることなく、その場で拡大画像を表示できるスクリプトは多数ある

サムネイル画像(縮小画像)がクリックされた際に、ポップアップウインドウを表示することなく、ページを移動することもなく、その場で拡大画像を表示させる仕組みがよく使われます。そのような機能を実現する代表的なスクリプトに「Lightbox」があります。

LightboxはCDN経由で読み込めるため、自サイトに設置することなく使用可能です。HTMLがレスポンシブで記述されていれば、Lightbox側では何も設定することなくスマホでも使えます。しかし、ページのデザインによってはちょっとしたズレが発生する場合もあり、カスタマイズが必要です。

そこで今回は、Lightboxの簡単な使い方・書き方・カスタマイズ方法をご紹介いたします。

【本記事の目次】

概要:Lightboxは設置する必要なくCDN経由で読み込める

Lightboxの構成ファイルはCDNから読み込める

Lightboxの構成ファイルはCDNから読み込める


Lightboxを自サイトで使用する場合でも、Lightboxスクリプトそのものを自サイトに設置する必要はありません。LightboxスクリプトはCDN経由でも提供されていますから、読み込むためのソースを書きさえすれば、何の準備もなく使えます。

具体的な書き方は後述しますが、読み込むための最新URLはCDNサイト上で調べられます。


 
必要なら自サイト内にセットアップして使うこともできる
Lightbox公式サイトには、一式をダウンロードできるボタンもある

Lightbox公式サイトには、一式をダウンロードできるボタンもある


Lightbox一式をダウンロードして自サイト内に直接セットアップすることもできます。どうしても自サイトに設置して使いたい場合は、Lightbox公式サイトにある上図のような「DOWNLOAD」リンクをクリックすれば、一式を含むZIPファイルが得られます。

しかし、そんな面倒なことをするメリットはあまりありません。CDN経由で読み込む方が読み込み速度も速いでしょうから、特別な理由がなければ、CDN経由で読み込んでおきましょう。


 

準備:LightboxとjQueryを読み込む記述方法(わずか3行)

Lightboxを読み込むには、以下のようにHTMLソース内に3行を記述するだけです。
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
上記の3行を、HTMLのhead要素内などに記述します。2行目と3行目はhead要素内ではなくbody要素内に書いても構いません。3行それぞれの意味を簡単に解説しておきます。

  • 1行目:Lightbox用CSS (lightbox.css)
    LightboxのスタイルシートをCDNから読み込む記述です。
  • 2行目:jQueryスクリプト (jquery-1.12.4.min.js)
    LightboxはjQueryを利用するJavaScriptですから、Lightboxスクリプトを読み込むよりも前にjQueryを読み込んでおく必要があります。上記は、jQueryのCDNからjQuery Ver 1.12.4を読み込む記述です。自サイト内で既にjQueryを利用している場合は、ここでjQueryを読み込む必要はありません。
  • 3行目:Lightbox本体スクリプト (lightbox.min.js)
    Lightboxのスクリプト本体をCDNから読み込む記述です。

1~3行目の記述場所
上記の3行はすべてHTMLのhead要素内(<head>~</head>)に書くこともできます。HTMLの文法では、link要素はhead要素内にしか書けないので、1行目だけは必ずhead要素内に記述する必要があります。しかし、2行目・3行目のscript要素は、head要素内ではなくbody要素内に書いても構いません。

あらゆるファイルをhead要素内で読み込むとページの表示待ち時間が長くなってしまうので、2行目・3行目のscript要素だけはbody要素の最後の方(</body>タグの直前など)に記述しておくのがお勧めです。

使用:画像をLightboxで拡大できるようにする書き方

ウェブページ上に掲載している画像を、Lightboxを使ってその場で拡大表示できるようにするには、画像のリンクを以下のように記述します。
<a href="sakura.jpg" data-lightbox="abc" data-title="桜写真拡大">
   <img src="sakura-thumbnail.jpg" alt="桜写真">
</a>
上記のように、a要素に「data-lightbox="○○○"」の形式で属性を加えておくと、本来なら「画像へのリンク」になるところが、ページ遷移しない「Lightboxを使った拡大表示」になります。「○○○」はグループ名(後述)で、任意の文字列を記述できます。上記では「abc」にしてあります。また、「data-title="◇◇◇"」の形式で属性を加えると、拡大された際のキャプションとして表示されます。data-lightbox属性は必須ですが、data-title属性は省略可能です。

上記のHTMLソースでは、
  • サムネイル画像(img要素で指定)がsakura-thumbnail.jpgで、
  • サムネイル画像の代替文字が「桜写真」で、
  • 拡大画像(a要素で指定)がsakura.jpgで、
  • 拡大画像のキャプションとして使われる文字列が「桜写真拡大」で、
  • Lightbox用のグループ名は「abc
です。1ページ内にいくつでもこの方法で記述できます。

1ページ内に複数個の画像があるとき、同じグループ名(=data-lightbox属性の値)を指定しておけば、左右の矢印アイコンをクリックすることで次々に拡大画像を連続して閲覧できるようになります。その機能が不要な場合は、画像それぞれに異なるグループ名を指定して下さい。

Lightboxスクリプトを使って、サムネイル画像をその場で拡大表示した例

Lightboxスクリプトを使って、サムネイル画像をその場で拡大表示した例


上記のソースを使って画像を拡大する仕組みを用意したサンプルは、Lightboxサンプルページ1をご覧下さい。

備考:古い仕様では、rel属性やtitle属性を使っていた
古いLightboxの仕様では、「data-lightbox="○○○"」ではなく「rel="○○○"」を使い、「data-title="◇◇◇"」ではなく「title="◇◇◇"」が使われていました。古い解説を読むとこのように書かれている場合もあります。現在のバージョンでもこれらの書き方は有効です。しかし、特に不都合がなければ、HTML5の書き方である「data-lightbox」属性や「data-title」属性を使っておきましょう。

調整:Lightboxが表示する枠のサイズやズレを解消するカスタマイズ

さて、Lightboxを使ってその場で画像を拡大したときに、拡大画像と外枠がずれて見えてしまう場合があります。また、拡大画像と外枠との間隔を自由に調節したい場合もあるでしょう。Lightboxスクリプトが動的に生成する拡大画像の表示ボックスには、「id="lightbox"」という属性が付加されています。ですから、このid名を使ってCSSを記述すれば、LightboxのCSSを直接書き換えることなくLightboxのCSSを上書きできます。

拡大画像の周囲にある白い枠線の太さをカスタマイズする場合のCSS
#lightbox .lb-container { padding: 3px; }
拡大画像の周囲にある白い枠線は、class名「lb-container」の余白として定義されています。この値を自前のCSSで上書きするよう記述すれば、自由に太さを変えられます。もし、白い枠線をまったく表示したくないのであれば、値に「0px」を指定すれば良いでしょう。標準では6pxの太さで表示されますので、半分にしたいなら上記ソースのように値を「3px」にして下さい。

拡大画像と白い枠線の表示がずれる場合に、ずれを解消するカスタマイズを加える
#lightbox .lb-container { padding: 0px; }
#lightbox .lb-outerContainer { padding: 6px; }
上記の2行は、最初の「.lb-container」での余白量調整をキャンセルして、代わりに「.lb-outerContainer」で余白を設ける指定です。ここでは6pxにしていますが、この値を自由に書き換えることで、好きな余白量を指定できます。もし、拡大画像を表示した際に、拡大画像そのものと白い枠線との表示位置がずれてしまう場合には、上記のCSSソースを追加するカスタマイズで対処してみて下さい。

Lightboxスクリプトでの拡大画像に付加される白い枠線を細くカスタマイズした例

Lightboxスクリプトでの拡大画像に付加される白い枠線を細くカスタマイズした例


上記のソースを使って余白量を調整したサンプルは、Lightboxサンプルページ2をご覧下さい。

画像拡大スクリプト「Lightbox」の簡単な設置方法と使い方

今回は、その場で画像を拡大するスクリプトとして代表的な、Lightboxスクリプトの使い方をご紹介いたしました。本記事でご紹介したCDNからの読み込み方法を使えば、自サイト内への設置作業が一切不要で、とても簡単に利用できます。ぜひ、試してみて下さい。

なお、Lightboxと同種で他のスクリプトを使う方法を以下の関連記事で紹介しています。そちらも併せてご参照下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。