Lightbox2は、ウェブサイトで画像を表示するためのJavaScriptライブラリです。このライブラリを使用すると、画像をクリックすると画面全体が暗くなり、選択した画像が画面の中央に拡大表示されます。画像の拡大表示に加えて、ユーザーが左右の矢印をクリックすることで画像を前後にナビゲートできる機能も提供します。このライブラリは、簡単にウェブサイトに組み込むことができ、カスタマイズも可能です。設定はシンプルで、HTMLに少量のコードを追加し、関連するCSSとJavaScriptファイルをウェブサイトにリンクするだけです。Lightbox2はレスポンシブデザインに対応しており、さまざまなデバイスや画面サイズで適切に表示されます。今回はこのライブラリーのCDNでの使い方から、npmパッケージとして使用する方法について説明していきます。
読者Lightbox2の実装は、最初にどこを理解するとよいですか？
木村対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
実装内容
実装内容では、Lightbox2の実装を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
Lightbox2
HTMLで初期化する
以下は必須の属性data-lightboxです。
単一の画像と使用する場合aタグに以下の属性値を追加します。名前は任意で、ここではimage-1としています。
<a href="images/image-1.jpg" data-lightbox="image-1">Image #1</a>複数画像としてセットする場合は同じ属性値を追加します。ここではroadtripとしています。
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>実装内容で押さえたいポイント
実装内容は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
CDNで使用
CDNで使用では、Lightbox2の実装を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lightbox2</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.css">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<main>
<div class="content">
<div class="content__inner">
<div class="content__wrap">
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=10" data-lightbox="img-group">
<img src="https://picsum.photos/1000/500?random=10" alt="ポップアップ画像">
</a>
</div><!-- /.content__img -->
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=11" data-lightbox="img-group">
<img src="https://picsum.photos/1000/500?random=11" alt="ポップアップ画像">
</a>
</div><!-- /.content__img -->
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=12" data-lightbox="img-group">
<img src="https://picsum.photos/1000/500?random=12" alt="ポップアップ画像">
</a>
</div><!-- /.content__img -->
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=13" data-lightbox="img-group">
<img src="https://picsum.photos/1000/500?random=13" alt="ポップアップ画像">
</a>
</div><!-- /.content__img -->
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=14" data-lightbox="img-group">
<img src="https://picsum.photos/1000/500?random=14" alt="ポップアップ画像">
</a>
</div><!-- /.content__img -->
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=15" data-lightbox="img-group">
<img src="https://picsum.photos/1000/500?random=15" alt="ポップアップ画像">
</a>
</div><!-- /.content__img -->
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=16" data-lightbox="img-group">
<img src="https://picsum.photos/1000/500?random=16" alt="ポップアップ画像">
</a>
</div><!-- /.content__img -->
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=17" data-lightbox="img-group">
<img src="https://picsum.photos/1000/500?random=17" alt="ポップアップ画像">
</a>
</div><!-- /.content__img -->
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=18" data-lightbox="img-group">
<img src="https://picsum.photos/1000/500?random=18" alt="ポップアップ画像">
</a>
</div><!-- /.content__img -->
</div><!-- /.content__wrap -->
</div><!-- /.content__inner -->
</div><!-- /.content -->
</main>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
</body>
</html>
ポイント
– lightbox2はjQueryに依存するため、lightboxよりも先に読み込む必要があります。
– CDNを使用する際には、lightboxのCSSも合わせて読み込む必要があります。
– CDNの特性としてインターネットの環境が必須条件となります。また、type=”module”としては読むこむことはできないため、注意が必要です。
CSS
img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
.content__inner {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
width: 95%;
max-width: 1000px;
margin: 0 auto;
}
.content__wrap {
row-gap: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.content__img {
aspect-ratio: 1/0.8;
width: 31%;
}CDNで使用で押さえたいポイント
CDNで使用は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
npmパッケージとして使用
Vite
Viteは、現代のWebプロジェクト向けの高速なフロントエンドビルドツールです。
package.json
{
"name": "vite-lightbox2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^5.0.8"
},
"dependencies": {
"jquery": "^3.7.1",
"lightbox2": "^2.11.4"
}
}HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="/main.js"></script>
</head>
<body>
<div class="content__img">
<a href="https://picsum.photos/1000/500?random=3" data-lightbox="image-1" data-title="My caption">
<img src="https://picsum.photos/1000/500?random=3" alt="">
</a>
</div>
</body>
</html>main.js
// Lightbox2 JavaScriptとCSSをインポート
import "lightbox2";
import "lightbox2/dist/css/lightbox.min.css";ポイント
– npmパッケージを使用した際のimportの仕方は上記の通りです。
– main.jsをtype=”module”として読み込む必要がある。
npmパッケージとして使用で押さえたいポイント
npmパッケージとして使用は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
npmパッケージとして使用の確認方法
ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。
まとめ
- Lightbox2は、容易にポップアップが実現できる
- jQueryを読み込む必要がある
- Lightbox2本体の読み込みと、CSSの読み込むが必要
- 便利なオプション等については公式を参照
- パッケージのインポートの仕方は上記を参照
MEMBER COMMENTS
コメント（0件）