【javascript】イメージギャラリーにページネーションを実装する
以下のような、イメージギャラリーを作ってみました。 ページネーションを実装し、9枚ずつ表示されるようにしてあります。 また、クリックすると拡大表示されるlightboxも実装してあります。
HTML
id="imgList"にjavascriptで画像を表示するHTMLを生成。
id="pagination"にjavascriptでページネーションのHTMLを生成。
<div class="content-wrapper">
<!-- 画像が表示される場所 -->
<div class="imgList" id="imgList"></div>
<div class="pagenumbers" id="pagination">
<!-- ページネーションが表示される場所 -->
<ul></ul>
</div>
</div>
CSS
必要な所だけpick up
/* 画像が9枚表示される要素 */
.content-wrapper .imgList {
display: flex;
flex-wrap: wrap;
}
.content-wrapper .imgList .item {
/* 画像の中央寄せ */
display: flex;
justify-content: center;
align-items: center;
/* ホバーした時、画像が拡大してもはみ出した部分を非表示 */
overflow: hidden;
}
.content-wrapper .imgList .item img:hover {
/* ホバーした時、画像が拡大 */
transform: scale(1.2);
}
/* ページネーション */
#pagination ul {
width: 100%;
display: flex;
background: #fff;
padding: 8px;
border-radius: 20px;
}
#pagination ul li {
color: blue;
list-style: none;
line-height: 45px;
text-align: center;
font-size: 18px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
}
/* ページ番号のボタン */
#pagination ul li.numb {
list-style: none;
height: 45px;
width: 45px;
margin: 0 3px;
line-height: 45px;
border-radius: 50%;
}
/* …の部分 */
#pagination ul li.dots {
font-size: 22px;
cursor: default;
}
/* ホバーした時、表示されているページの時 */
#pagination li.active,
#pagination ul li.numb:hover,
#pagination ul li:first-child:hover,
#pagination ul li:last-child:hover {
color: #fff;
background: blue;
}
javascript
data.js
配列のlist_itemsに画像のURLを書きます。
const list_items = [
"https://gxy-life.com/images/blog/202112/1.jpeg",
"https://gxy-life.com/images/blog/202112/2 (2).JPG",
"https://gxy-life.com/images/blog/202112/2 (3).JPG",
"https://gxy-life.com/images/blog/202112/2 (4).JPG",
"https://gxy-life.com/images/blog/202112/3.jpg",
"https://gxy-life.com/images/blog/202112/4.jpg",
]
画像が表示される部分のHTML生成
// 画像が表示される要素を取得
const list_element = document.getElementById("imgList");
// 現在のページ数
let current_page = 1;
// 1ページに表示される画像の数
let rows = 9;
// 引数1:画像のURLの配列 2:画像が表示される要素 3:1ページに表示される画像の数 4:現在のページ
function DisplayList(items, wrapper, rows_per_page, page) {
wrapper.innerHTML = "";
page--;
// そのページに表示される画像を計算
let start = rows_per_page * page; // 1ページ目なら0
let end = start + rows_per_page; // 1ページ目なら最後は9
let paginatedItems = items.slice(start, end); // 配列から取り出す
for (let i = 0; i < paginatedItems.length; i++) {
let item = paginatedItems[i];
// HTML生成
let item_element = document.createElement("div");
let img = document.createElement("img");
let a = document.createElement("a");
item_element.classList.add("item");
// lightbox要の属性
a.setAttribute("data-lightbox", "abc");
a.href = item;
img.src = item;
wrapper.appendChild(item_element);
item_element.appendChild(a);
a.appendChild(img);
}
}
ページネーション部分のHTML生成
// トータルページを計算
let totalPageNum = Math.ceil(list_items.length / rows);
function SetupPagination(wrapper, current_page) {
wrapper.innerHTML = "";
let liTag = "";
let active;
let beforePage = current_page - 1;
let afterPage = current_page + 1;
if (current_page > 1) {
// Prevボタン 1ページ目は表示させない
liTag += `<li class="btn prev" onclick="isClicked(${
current_page - 1
})"><span><i class="fas fa-angle-left"></i> Prev</span></li>`;
}
if (current_page > 2) {
// 1ページ目へのリンクボタン
liTag += `<li class="first numb" onclick="isClicked(1)"><span>1</span></li>`;
if (current_page > 3) {
// 4ページ目以降、1ページ目のリンクボタンと1ページ戻るボタンの間の“...”
liTag += `<li class="dots"><span>...</span></li>`;
}
}
if (current_page == totalPageNum) { // 最終ページの時
beforePage = beforePage - 2; //
} else if (current_page == totalPageNum - 1) { // 最終ページの1ページ前の時
beforePage = beforePage - 1;
}
if (current_page == 1) { // 1ページ目の時
afterPage = afterPage + 2;
} else if (current_page == 2) { // 2ページ目の時
afterPage = afterPage + 1;
}
for (var pageNum = beforePage; pageNum <= afterPage; pageNum++) {
if (pageNum > totalPageNum) {
// ページがトータルページを越えた時、処理をスキップ
continue;
}
if (pageNum == 0) {
pageNum = pageNum + 1;
}
if (current_page == pageNum) {
// 選択したページにactiveのクラスを追加
active = "active";
} else {
// その他のページにはactiveを追加しない
active = "";
}
liTag += `<li class="numb ${active}" onclick="isClicked(${pageNum})"><span>${pageNum}</span></li>`;
}
if (current_page < totalPageNum - 1) {
if (current_page < totalPageNum - 2) {
// 最終ページのリンクボタンと1ページ進むボタンの間の“...”
liTag += `<li class="dots"><span>...</span></li>`;
}
// 最終ページのリンクボタン
liTag += `<li class="last numb" onclick="isClicked(${totalPageNum})"><span>${totalPageNum}</span></li>`;
}
if (current_page < totalPageNum) {
// Nextボタン 最終ページでは表示させない
liTag += `<li class="btn next" onclick="isClicked(${
current_page + 1
})"><span>Next <i class="fas fa-angle-right"></i></span></li>`;
}
wrapper.innerHTML = liTag;
}
レスポンシブ対応
レスポンシブに対応できるよう画像のサイズを毎回計算します。
横幅を取得し、三枚ずつなので3で割ります。
画像のアスペクト比は3:2にしたいので、横幅/3*2
function setImgSize() {
const box = document.querySelectorAll(".content-wrapper .imgList .item");
box.forEach((e) => {
let w = Math.floor(list_element.clientWidth / 3);
e.style.width = `${w}px`;
e.style.height = `${(w / 3) * 2}px`;
});
}

クリック処理
クリックした時、先ほどの関数3つを処理します。
function isClicked(e) {
// 画像を表示
DisplayList(list_items, list_element, rows, e);
// パージネーション
SetupPagination(pagination_element, e);
// 画像サイズを計算
setImgSize();
}
lightboxの使い方

lightboxの使い方は以下を参考にしてください。

こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク