フォトギャラリーを作る（HTML/CSS/JS）

2022.10.2公開（2022.10.10更新）
@HTMLコーディング
#部品

前書き

フォトギャラリーを作成する方法を掲載しています。

フォトギャラリーを作る

Swiper.jsを読み込む

Swiper

画像を並べる

大きさの異なる要素を隙間なく配置する（HTML/CSS）

モーダル（自作）を作成して、中にスライダーを設置する

画像をクリックしたらモーダルを表示して、スライドを切り替える

無料写真素材なら【写真AC】


<!-- スワイパーのCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<!-- 中略 -->

<!-- モーダル -->
<div class="modal" data-modalaction>
  <div class="modal-inner" data-closearea>
    <!-- 閉じる -->
    <div class="close" data-close>
      <div class="close-bar"></div>
      <div class="close-bar"></div>
    </div>
    <!-- スワイパー -->
    <div class="swiper modal-swiper" data-modalswiper>
      <div class="swiper-wrapper">
        <div class="swiper-slide modal-slide"><img class="modal-img" src="星.webp" ></div>
        <div class="swiper-slide modal-slide"><img class="modal-img" src="桜.webp" ></div>
        <div class="swiper-slide modal-slide"><img class="modal-img" src="羊蹄山.webp" ></div>
        <div class="swiper-slide modal-slide"><img class="modal-img" src="傘.webp" ></div>
        <div class="swiper-slide modal-slide"><img class="modal-img" src="熊野本宮大社.webp" ></div>
        <div class="swiper-slide modal-slide"><img class="modal-img" src="すすき.webp" ></div>
        <div class="swiper-slide modal-slide"><img class="modal-img" src="コスモス.webp" ></div>
        <div class="swiper-slide modal-slide"><img class="modal-img" src="月と海.webp" ></div>
      </div>
      <div class="modal-nav-prev" data-modalprev></div>
      <div class="modal-nav-next" data-modalnext></div>
      <div class="modal-pagination" data-modalpagination></div>
    </div>
  </div>
</div>

<!-- 画像を並べる（並び方に関係するclassを一部省略） -->
<div class="wrap">
  <div class="item" data-open data-slide="1"><img class="item-img" src="星.webp" ></div>
  <div class="item" data-open data-slide="2"><img class="item-img" src="桜.webp" ></div>
  <div class="item" data-open data-slide="3"><img class="item-img" src="羊蹄山.webp" ></div>
  <div class="item" data-open data-slide="4"><img class="item-img" src="傘.webp" ></div>
  <div class="item" data-open data-slide="5"><img class="item-img" src="熊野本宮大社.webp" ></div>
  <div class="item" data-open data-slide="6"><img class="item-img" src="すすき.webp" ></div>
  <div class="item" data-open data-slide="7"><img class="item-img" src="コスモス.webp" ></div>
  <div class="item" data-open data-slide="8"><img class="item-img" src="月と海.webp" ></div>
</div>


body{
  overflow-y: scroll;
  &.modal-active{ //モーダル表示時は、bodyにfixedを指定する
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  }
}

//モーダル
.modal{
  //配置、装飾
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background: rgba(#000,0.9);
  min-width: 100vw; overflow-y: scroll;
  //動き
  opacity: 0; z-index: -1; transition: 0.2s;
  &.modal-active{
    opacity: 1; z-index:1001;
  }
}
.modal-inner{
  display: flex; align-items: center; min-height: 100%;
}
.close{
  position: absolute; top: 0; right: 0; z-index: 10; padding: 25px 20px 20px; cursor: pointer;
}
.close-bar{
  width: 40px; height: 2px; background: #606060;
  &:nth-child(1){
    transform: translateY(13px) rotate(-45deg);
  }
  &:nth-child(2){
    transform: translateY(-13px) rotate(45deg); margin: 24px 0 0; 
  }
}
//スワイパー
.modal-swiper{
  --swiper-pagination-color: #fff;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bullet-horizontal-gap: 6px;
  width: 92%; padding: 50px 0;
}
.modal-slide{
  text-align: center;
}
.modal-nav-next,
.modal-nav-prev{
  position: absolute; z-index: 2; top: 0; bottom: 0; margin: auto; cursor: pointer; outline: none;
  display: flex; align-items: center;
  &::before{
    content: ""; width: 35px; height: 35px; border-style: solid; border-color: #606060;
  }
}
.modal-nav-prev{
  left: 20px;
  &::before{
    border-width: 2px 0 0 2px; transform: rotate(-45deg);
  }
}
.modal-nav-next{
  right: 20px;
  &::before{
    border-width: 2px 2px 0 0; transform: rotate(45deg);
  }
}
.modal-pagination{
  position: absolute; right: 0; bottom: 10px; left: 0; text-align: center; 
}

//画像を並べる（並び方に関係するcssを一部省略）
.wrap{
  display: grid; gap: 10px 10px;
}
.item{
  cursor: pointer;
}
.item-img{
  width: 100%; height: 100%; object-fit: cover;
}


import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.esm.browser.min.js'

const body = document.querySelector('body');
const openBtn = document.querySelectorAll('[data-open]'); //開くボタン
const closeBtn = document.querySelectorAll('[data-close]'); //閉じるボタン
const closeArea = document.querySelector('[data-closearea]'); //モーダル背景
const slideBtn = document.querySelectorAll('[data-slide]'); //スライド切替ボタン
const modalAction = document.querySelectorAll('[data-modalaction]'); //モーダル表示時にクラスを追加
let windowTop = 0;

//モーダル表示
const modalOpen = () => {
  modalAction.forEach((item) => {
    item.classList.add("modal-active");
  });
  windowTop = window.scrollY;
  body.style.top = - windowTop + "px";
  body.classList.add("modal-active"); //bodyの位置をずらすことで、見た目上は、コンテンツの位置を変えない
}

//モーダル非表示
const modalClose = (id) => {
  modalAction.forEach((item) => {
    item.classList.remove("modal-active");
  });
  body.classList.remove("modal-active"); //fixedを解除
  body.style.top = "";
  window.scrollTo({
    top: windowTop, //元の位置にスクロール
  });
}

//ボタン クリック
openBtn.forEach((item) => {
  item.addEventListener('click', () => {
    modalOpen();
  });
});
closeBtn.forEach((item) => {
  item.addEventListener('click', () => {
    modalClose();
  });
});
window.addEventListener('click', (e) => {
  if (e.target == closeArea) {
    modalClose();
  }
});

//スワイパー
const swiper = new Swiper("[data-modalswiper]", {
  speed: 300,
  effect: 'fade',
  autoHeight: true,
  loop: true,
  fadeEffect: {
    crossFade: true
  },
  navigation: {
    nextEl: "[data-modalnext]",
    prevEl: "[data-modalprev]",
  },
  pagination: {
    el: "[data-modalpagination]",
  },
});

slideBtn.forEach((item) => {
  item.addEventListener('click', () => {
    const index = item.dataset.slide;
    swiper.slideTo(index, 0);
  });
});