本サイトは記事内に広告を含む場合があります

HTML・CSS JavaScript

JQueryプラグインLightbox2の使い方【商用利用OK】

JQueryプラグインLightboxの使い方【商用利用OK】

JQueryで拡大画像のモーダルウィンドが作れる「Lightbox」というプラグインはご存知でしょうか？

Lightboxはサイトにギャラリーを載せる際などに小さな画像を拡大して表示する時によく使われます。

ライセンスもMITなので無料でかつ、商用利用もできて入門者でも簡単に使えるので、JQueryで拡大画像のモーダルを作る際には一番おすすめのプラグインです。

そこで、今回はLightboxをJQueryで使う方法について詳しく解説していきます。

コーディングお役立ちツール

 

 

Lightboxとは何か

Lightboxとは何か

LightboxはJavaScriptで、拡大画像が表示できるモーダルウィンドウが作れるJQueryのプラグインです。

サイトへの導入も簡単でJavaScriptとCSSのファイルをダウンロードするだけですぐに使うことができます。

また、JQueryは1.7以降が安定的に動作するので、別バージョンのものを用意のが面倒な場合は、すでにJQueryが組み込まれている「lightbox-plus-jquery.js」を使うこともできます。

Lightboxは、少しだけしかJQueryを書いたことがない初心者でも簡単に扱うことができるので、これからプラグインの勉強を初めていきたい人にとてもおすすめです。

Lightbox の Examples はコチラ

 

Lightboxの使い方

Lightboxの使い方

Lightboxを使うためには最低限、JQueryの1.7以上と「lightbox.js」と「lightbox.css」が必要です。

使い方は簡単で、公式サイトから最新のLightboxのファイルをダウンロードしてきてHTMLの「header」タグの中に書き込むだけで、すぐに使い始めることができます。

また、ダウンロードせずに公開されているLightboxのファイルにリンクを繋げるだけで使うことができるCDNの仕組みも用意されているので、PCに取り込むのが面倒な人は、そちらを使うことをおすすめします。

 

Lightboxのダウンロード

Lightboxのダウンロード

Lightboxをダウンロードするためには「https://lokeshdhakar.com/projects/lightbox2/#getting-started」にアクセスしてgithubのリポジトリーから最新のファイルを入手しましょう。

また、npm (node package manager)を使ってダウンロードする場合はターミナルで「npm install lightbox2 --save」と入力することでlightboxが入手できます。

githubからダウンロードが完了すると、「dist」フォルダの中にある「lightbox.min.js」と「lightbox.min.css」をコピーして、これから開発を始めるプロジェクトの中に配置しましょう。

 

LightboxのCDN

LightboxのCDN

LightboxのCDNは「cdnjs.com」の「https://cdnjs.com/libraries/lightbox2」で公開されているので、「lightbox.min.js」と「lightbox.min.css」の欄にある「Copy URL」のボタンを押してプロジェクトのHTMLファイルの「header」タグのの中に以下のように記述しましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css">
<!-- lightbox cdn -->

 

JQueryが組み込まれたLightboxを使う方法

JQuery in Lightbox

LightboxはJQueryの1.7以降が安定動作するため、本番プロジェクトでLightboxのためだけに別バージョンのJQueryを用意するのが心配な人は、すでにJQueryが組み込まれている「lightbox-plus-jquery.min.js」を使うと良いでしょう。

「lightbox-plus-jquery.js」を使うとLightboxのJavaScript単体で動かせるようになるので、わざわざJQuery一つのために無駄なサイトのリソースを取られることがありません。

ファイルのパスは「lightboxバージョン > dist > js > lightbox-plus-jquery.min.js」です。

 

Lightboxの実装デモ

Lightboxの実装デモ

Lightboxの基本的な実装方法は非常に簡単で、ほとんどコピペでも出来ます。

まずは「index.html」「lightbox.min.css」「lightbox.min.js」とギャラリーを作るための「style.css」のファイルと「reset.css」の5つを用意しましょう。

また、矢印などの画像も必要に応じて適正なパスでプロジェクトファイルに配置しておきましょう。

ファイルが用意できたら以下のようにHTMLを記述することでLightboxを使うことができます。

Lightboxデモの実行結果

 

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightboxの実装デモ</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" />
</head>

<body>
<div class="lightbox-container">
    <ul>
        <li><a href="./images/img_01.jpg" data-lightbox="simple-group" data-title="町" data-alt="町の画像"><img src="./images/img_01.jpg" alt="町の画像"></a></li>
        <li><a href="./images/img_02.jpg" data-lightbox="simple-group" data-title="ビーチ" data-alt="ビーチの画像"><img src="./images/img_02.jpg" alt="ビーチの画像"></a></li>
        <li><a href="./images/img_03.jpg" data-lightbox="simple-group" data-title="岩" data-alt="岩の画像"><img src="./images/img_03.jpg" alt="岩の画像"></a></li>
        <li><a href="./images/img_04.jpg" data-lightbox="simple-group" data-title="鳥居" data-alt="鳥居の画像"><img src="./images/img_04.jpg" alt="鳥居の画像"></a></li>
        <li><a href="./images/img_05.jpg" data-lightbox="simple-group" data-title="ぶどう" data-alt="ぶどうの画像"><img src="./images/img_05.jpg" alt="ぶどうの画像"></a></li>
        <li><a href="./images/img_06.jpg" data-lightbox="simple-group" data-title="ケーキ" data-alt="ケーキの画像"><img src="./images/img_06.jpg" alt="ケーキの画像"></a></li>
    </ul>
</div>
</body>
</html>

Lightboxだけに限った話ではないですが、JQueryプラグインを使う際は必ず、JQueryのファイルをプラグインのファイルよりも先に読み込ませてから使うようにしましょう。

また、Lightboxを動かす時は最低限、モーダルを表示したい「anchor」タグに「href」属性と「data-lightbox」属性を付けましょう。

 

Lightboxで使えるHTML属性

data-lightbox画像をグループ化するためのラベル
data-title画像のタイトル
data-alt画像のalt属性

 

Lightboxオプションの使い方

Lightboxオプションの使い方

Lightboxのデフォルトオプションを変更するためには「option」メソッドを使います。

以下の例ではwindow幅が縮んだ時に0.2秒かけてモーダルのサイズを調節するオプションと、矢印を押して最後の画像に到達すると右側に矢印が表示されて、はじめの画像に戻る設定しています。

また、オプションの種類は13個あるので、それぞれ詳しく解説していきます。

<script>
lightbox.option({
  'resizeDuration': 200,
  'wrapAround': true
});
</script>

 

Lightboxのオプション

オプションデフォルト説明
alwaysShowNavOnTouchDevicesfalse「true」の場合はタッチ操作をサポートする全てのデバイスでモーダルの矢印が表示されます
albumLabel"Image %1 of %2"モーダルのキャプションの下に表示される現在の画像番号と画像の総数が表示される部分の単語を変更できます
disableScrollingfalse「true」の場合はモーダルが開いている時はページがスクロールできないようになります
fadeDuration600モーダルがフェードイン、フェードアウトにかかる時間です(単位 / ミリ秒)
fitImagesInViewporttrue「true」場合は画像がビューポートの外側にはみ出さないように調節してくれます
imageFadeDuration600画像がフェードインする時にかかる時間です(単位 / ミリ秒)
maxWidth画像の横幅が設定されたピクセルに制限されます。

※アスペクト比は維持されません

maxHeight画像の縦幅が設定されたピクセルに制限されます。

※アスペクト比は維持されません

positionFromTop50モーダルが表示されるビューポートの上からの距離
resizeDuration700ウィンドウがされた際にモーダルをリサイズさせる時間です(単位 / ミリ秒)
showImageNumberLabeltrue「false」の場合は画像の総数が表示されません
wrapAroundfalse「true」の場合は最後の画像に到達すると、矢印を押して一番最初の画像に移ることができます

 

Lightboxをレスポンシブ化するためのCSSとJSの書き方

Lightboxをレスポンシブ化するためのCSSとJSの書き方

Lightboxのモーダル自体はデフォルトでレスポンシブになっていますが、画像を配置しているギャラリーのCSSをある程度調節する必要があります。

以下の例では、ギャラリーを包含している要素の横幅と、画像を親要素の幅に応じて「47.5%」の幅で表示するようにしています。

また、画像の縦幅を横幅と同じにするためにJavaScriptでピクセルを微調節しています。

Lightboxのレスポンシブ化はコチラ

 

CSS

.demo_wrap {
  width: 100%;
  height: auto;
}

.demo_wrap:not(:last-child) {
  margin-bottom: 100px;
}

.demo_wrap .lightbox-container {
  width: 100%;
  height: auto;
}

.demo_wrap .lightbox-container ul {
  padding: 15px 15px 0px 15px;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #eee;
  box-sizing: border-box;
  border-radius: 5px;
}

.demo_wrap .lightbox-container ul:after {
  content: "";
  width: 230px;
}

.demo_wrap .lightbox-container ul li {
  margin-bottom: 15px;
  width: 230px;
  height: auto;
  border-radius: 5px;
  border: solid 6px #fff;
  box-sizing: border-box;
}

.demo_wrap .lightbox-container ul li a {
  width: 100%;
  height: auto;
  display: block;
}

.demo_wrap .lightbox-container ul li a:hover {
  opacity: 0.7;
}

.demo_wrap .lightbox-container ul li a img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 480px) {
  .demo_wrap {
    width: 100%;
    height: auto;
  }
  .demo_wrap:not(:last-child) {
    margin-bottom: 100px;
  }
  .demo_wrap .lightbox-container {
    width: 100%;
    height: auto;
  }
  .demo_wrap .lightbox-container ul {
    padding: 15px 15px 0px 15px;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #eee;
    box-sizing: border-box;
    border-radius: 5px;
  }
  .demo_wrap .lightbox-container ul:after {
    content: "";
    width: 47.5%;
  }
  .demo_wrap .lightbox-container ul li {
    margin-bottom: 15px;
    width: 47.5%;
    height: auto;
    border-radius: 5px;
    border: solid 6px #fff;
    box-sizing: border-box;
  }
  .demo_wrap .lightbox-container ul li a {
    width: 100%;
    height: auto;
    display: block;
  }
  .demo_wrap .lightbox-container ul li a:hover {
    opacity: 0.7;
  }
  .demo_wrap .lightbox-container ul li a img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
}

 

JavaScript

const break_point = 480;

function gallery_img_resize() {
    let $window = $(window);
    let $lightbox_img = $('.lightbox-container ul li img');

    let default_height = 230;

    if($window.width() <= break_point) {
        $lightbox_img.css({
            'height': `${$lightbox_img.width()}px`
        });
    } else {
        $lightbox_img.css({
            'height': `${default_height}px`
        });
    }
}
$(window).on('load resize', function() {
    gallery_img_resize();
});

 

まとめ

今回はJQueryプラグインLightboxの使い方について解説してきましたが、いかがでしたでしょうか？

LightboxはJQuery初心者の人でも簡単に使うことができるので、プラグインの入門教材として最適であることが分かっていただけたかと思います。

また、実際の実務で使うプラグインとしても十分な機能を備えているので、サイトにギャラリーを載せる際には非常におすすめできるプラグインです。

-HTML・CSS, JavaScript