Parts

Parts

画像ギャラリーのパーツ 2

戻る

「input」のnameは設置するギャラリーごとに名前を付ける。
画像はメイン画像とサムネイル画像を用意する。
「label」のfor名と「input」のid名は項目ごとにかぶらない名前を付ける。
メイン画像とそれに対応するサムネイルを紐づけている。
※自動で表示を切り替えるにはjavascriptが必要。


<div class="imageGalleryBox--type02 --autoImageGallery">
  <input type="radio" id="imageGallery--type02__label001" name="imageGallery--type02__input" checked/>
  <figure><img src="メイン画像の一枚目の画像パス" alt="メイン画像01"/></a></figure>

  <input type="radio" id="imageGallery--type02__label002" name="imageGallery--type02__input"/>
  <figure><img src="メイン画像の二枚目の画像パス" alt="メイン画像02"/></figure>

  <input type="radio" id="imageGallery--type02__label003" name="imageGallery--type02__input"/>
  <figure><img src="メイン画像の三枚目の画像パス" alt="メイン画像03"/></figure>

  <input type="radio" id="imageGallery--type02__label004" name="imageGallery--type02__input"/>
  <figure><img src="メイン画像の四枚目の画像パス" alt="メイン画像04"/></figure>

  <input type="radio" id="imageGallery--type02__label005" name="imageGallery--type02__input" checked/>
  <figure><img src="メイン画像の五枚目の画像パス" alt="メイン画像05"/></figure>

  <input type="radio" id="imageGallery--type02__label006" name="imageGallery--type02__input"/>
  <figure><img src="メイン画像の六枚目の画像パス" alt="メイン画像06"/></figure>

  <div class="imageGallery">
    <label for="imageGallery--type02__label001"><img src="サムネイル画像の一枚目の画像パス" alt="サムネイル画像01"/></label>
    <label for="imageGallery--type02__label002"><img src="サムネイル画像の二枚目の画像パス" alt="サムネイル画像02"/></label>
    <label for="imageGallery--type02__label003"><img src="サムネイル画像の三枚目の画像パス" alt="サムネイル画像03"/></label>
    <label for="imageGallery--type02__label004"><img src="サムネイル画像の四枚目の画像パス" alt="サムネイル画像04"/></label>
    <label for="imageGallery--type02__label005"><img src="サムネイル画像の五枚目の画像パス" alt="サムネイル画像05"/></label>
    <label for="imageGallery--type02__label006"><img src="サムネイル画像の六枚目の画像パス" alt="サムネイル画像06"/></label>
  <!-- /.imageGallery --></div>
<!-- /.imageGalleryBox --></div>
                

.imageGalleryBox--type02 {
  display: block;
  position: relative;
  padding-top: 20em; /* メイン画像の高さ */
  min-height: 20em; /* メイン画像の高さ */
  @media print, screen and (min-width: 768px) {
    padding-top:0;
  }
  input[type=radio] {
    position: absolute;
    opacity: 0;
    visibility: hidden;
  }
  input[type=radio]:checked + figure {
    opacity: 1;
    z-index: 1;
  }
  input[type=radio] + figure {
    width: 100%;
    height: 20em; /* メイン画像の高さ */
    background: #EEE;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    overflow: hidden;
    @media print, screen and (min-width: 768px) {
      width: 78%;
    }
  }
  input[type=radio] + figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  input[type=radio] + figure a {
    display: block;
    width: 100%;
    height: 100%;
  }
  input:nth-of-type(1):checked ~ .imageGallery label:nth-of-type(1) img,
  input:nth-of-type(2):checked ~ .imageGallery label:nth-of-type(2) img,
  input:nth-of-type(3):checked ~ .imageGallery label:nth-of-type(3) img,
  input:nth-of-type(4):checked ~ .imageGallery label:nth-of-type(4) img,
  input:nth-of-type(5):checked ~ .imageGallery label:nth-of-type(5) img,
  input:nth-of-type(6):checked ~ .imageGallery label:nth-of-type(6) img {
    box-shadow: 0 0 0 3px #000;
    opacity: 0.8;
  }
  > .imageGallery {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.25em;
    @media print, screen and (min-width: 768px) {
      padding-left:80%;
    }
    label {
      width: calc(100% / 6);
      padding: 0.5em;
      display: block;
      cursor: pointer;
      @media print, screen and (min-width: 768px) {
        width: calc(100% / 2);
      }
      img {
        width: 100%;
        transition: opacity 0.1s ease-in-out;
        &:hover{
          opacity: 0.8;
        }
      }
    }
  }
}
              

.imageGalleryBox--type02 {
  // 変数
  $imageGalleryBoxType02Height: 20em; // メイン画像の高さ
  $imageGalleryBoxType02Count: 6; // ギャラリーのスライド数

  display: block;
  position: relative;
  padding-top: $imageGalleryBoxType02Height;
  min-height: $imageGalleryBoxType02Height;
  @media print, screen and (min-width: 768px) {
    padding-top:0;
  }
  input[type="radio"] {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    &:checked + figure {
      opacity: 1;
      z-index: 1;
    }
    + figure {
      width: 100%;
      height: $imageGalleryBoxType02Height;
      background: #EEE;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      overflow: hidden;
      @media print, screen and (min-width: 768px) {
        width: 78%;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      a {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  //メイン画像が表示すると対応するサムネイル画像が変化
  @for $i from 1 through $imageGalleryBoxType02Count {
    input:nth-of-type(#{$i}):checked ~ .imageGallery
    label:nth-of-type(#{$i}) img {
      box-shadow: 0 0 0 3px #000;
      opacity: 0.8;
    }
  }
  > .imageGallery {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.25em;
    @media print, screen and (min-width: 768px) {
      padding-left:80%;
    }
    label {
      width: calc(100% / #{$imageGalleryBoxType02Count});
      padding: 0.5em;
      display: block;
      cursor: pointer;
      @media print, screen and (min-width: 768px) {
        width: calc(100% / 2);
      }
      img {
        width: 100%;
        transition: opacity 0.1s ease-in-out;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

ギャラリー内の画像を自動で切り替えるJavascript

ギャラリー内のinputを取得して、setIntervalで切り替えています。
ギャラリーを囲う要素に「--autoImageGallery」というクラスをつけると動作します。
ホバーすると、一時停止します。


function startAutoImageGallery(gallery) {
  // ラジオボタンの要素と数を取得
  const radios = gallery.querySelectorAll('input[type="radio"]');
  const length = radios.length;
  if (!length) return;

  let intervalId = null;

  function nextSlide() {
    const currentIndex = [...radios].findIndex(radio => radio.checked);
    const nextIndex = (currentIndex + 1) % length;
    radios[nextIndex].checked = true;
  }
  function start() {
    if (!intervalId) {
      //5000ミリ秒間隔で切り替える
      intervalId = setInterval(nextSlide, 5000);
    }
  }
  function stop() {
    clearInterval(intervalId);
    intervalId = null;
  }
  // 初回スタート
  start();
  // ホバーで停止
  gallery.addEventListener('mouseenter', stop);
  gallery.addEventListener('mouseleave', start);
}

window.addEventListener('load', function () {
  // 自動切り替えをするギャラリー要素を取得
  const galleries = document.querySelectorAll('.--autoImageGallery');
  galleries.forEach(gallery => {
    startAutoImageGallery(gallery);
  });
});
戻る
ページ上部に戻るスプーン