Lightbox2の実装
はじめに
概要
Lightbox2は、ウェブサイトで画像を表示するためのJavaScriptライブラリです。このライブラリを使用すると、画像をクリックすると画面全体が暗くなり、選択した画像が画面の中央に拡大表示されます。画像の拡大表示に加えて、ユーザーが左右の矢印をクリックすることで画像を前後にナビゲートできる機能も提供します。このライブラリは、簡単にウェブサイトに組み込むことができ、カスタマイズも可能です。設定はシンプルで、HTMLに少量のコードを追加し、関連するCSSとJavaScriptファイルをウェブサイトにリンクするだけです。Lightbox2はレスポンシブデザインに対応しており、さまざまなデバイスや画面サイズで適切に表示されます。今回はこのライブラリーのCDNでの使い方から、npmパッケージとして使用する方法について説明していきます。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
実装内容
画像をクリック
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で使用
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%;
}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”として読み込む必要がある。
まとめ
- Lightbox2は、容易にポップアップが実現できる
- jQueryを読み込む必要がある
- Lightbox2本体の読み込みと、CSSの読み込むが必要
- 便利なオプション等については公式を参照
- パッケージのインポートの仕方は上記を参照