※テーマエディタで商品詳細＞モバイルのレイアウトが「サムネイルを非表示」「２列」に設定されている場合、この機能は動きません。

test2.mov

設定方法

<style>
#show-modal-button {
  display: none; 
  visibility: hidden;
  height: 0;
  margin: 0 auto;
  padding: 0;
  border: none;
  font-size: 1.4rem;
  border-radius: 8px;
  background-color: #000;
  color: #FFF;
}
#show-modal-button + p {
  margin-top: 0 !important;
}
#thumbnail-modal {
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.5);
  z-index: 100;
  margin: 0;
  padding: 0;
}
#thumbnail-modal .inner {
  position: relative;
  background: white; 
  width: 100%; 
  height: 100%; 
  overflow-y: hidden;
  margin: 0;
}
#thumbnail-modal .header {
  position: absolute;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#thumbnail-modal .header h2 {
  margin: 0 auto;
}
#close-modal-button {
  border: none;
  background-color: #FFF;
  position: absolute;
  left: 0;
  font-size: 1.4rem;
}
#thumbnail-modal-content {
  background: #fff;
  border-top: 1px solid #e6e4e4;
  bottom: 0;
  height: auto;
  left: 0;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  right: 0;
  top: 50px;
  padding: 20px;
}
#thumbnail-modal-content ul {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 749px) {
  #show-modal-button {
    visibility: visible;
    height: auto;
    padding: 1rem 2rem;
  }
}
body.modal-open {
  overflow: hidden;
}
</style>

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    let originalParent, originalNextSibling, cloneThumbnails = null;
    let modalOpen = false;
    const openModal = () => {
      // 元のULリストを取得
      const sliderThumbnails = document.getElementById('Slider-Thumbnails-{{ section.id }}{{ id_append }}');
      (sliderThumbnails.querySelectorAll('.thumbnail-list__item')).forEach((item)=>{
        item.addEventListener('click', closeModal);
      })
      // 元の親要素と位置を保存
      originalParent = sliderThumbnails.parentNode;
      originalNextSibling = sliderThumbnails.nextSibling;
      cloneThumbnails = sliderThumbnails.cloneNode(true);
      // モーダルウィンドウの中にULリストを移動
      var thumbnailModalContent = document.getElementById('thumbnail-modal-content');
      thumbnailModalContent.appendChild(sliderThumbnails);
      // 元の親要素にはULリストのクローンを追加（media-gallery.jsのエラー回避用）
      originalParent.insertBefore(cloneThumbnails, originalNextSibling);
      // モーダルウィンドウを表示
      const thumbnailModal = document.getElementById('thumbnail-modal');
      thumbnailModal.style.display = 'block';
      // Bodyにmodal-openクラスを追加
      document.body.classList.add('modal-open');
      modalOpen = true;
    }
    const closeModal = () => {
      if (!modalOpen) return;
      // ULリストのクローンを削除（media-gallery.jsのエラー回避用）
      if (cloneThumbnails) originalParent.removeChild(cloneThumbnails);
      // 元の位置にULリストを戻す
      const sliderThumbnails = document.getElementById('Slider-Thumbnails-{{ section.id }}{{ id_append }}');
      originalParent.insertBefore(sliderThumbnails, originalNextSibling);
      // Bodyからmodal-openクラスを削除
      document.body.classList.remove('modal-open');
      setTimeout(()=>{
        // モーダルウィンドウを非表示
        const thumbnailModal = document.getElementById('thumbnail-modal');
        thumbnailModal.style.display = 'none';
      }, 0);
      modalOpen = false;
    }
    const sliderThumbnails = document.getElementById('Slider-Thumbnails-{{ section.id }}{{ id_append }}');
    if (sliderThumbnails) {
      const showModalButton = document.getElementById('show-modal-button');
      showModalButton.style.display = 'block';
      showModalButton.addEventListener('click', openModal);
      const closeModalButton = document.getElementById('close-modal-button');
      closeModalButton.addEventListener('click', closeModal);
    }
  });
</script>
<!-- モーダルウィンドウ -->
<div id="thumbnail-modal">
  <div class="inner">
    <div class="header">
      <button id="close-modal-button">閉じる</button>
      <h2>商品画像一覧</h2>
    </div>
    <div id="thumbnail-modal-content"></div>
  </div>
</div>
<!-- モーダル表示ボタン -->
<button id="show-modal-button">商品画像一覧を表示</button>