如何修复我的模态图库以更好地改进后续图像

问题描述 投票：0回答：1

我还在学习 JS，想制作一个小型模态画廊，内部有自己的画廊，用于婚礼沙龙的小册子。以下是我的 Codepen 的链接：

代码笔

我设法打开模态画廊，但第二个画廊变得混乱并且无法正常播放。我还不是 JavaScript 专家，但我已经做到了这一点。

我希望第二个不要到处都是。我之前尝试编写过代码，但我的技能仍然缺乏。

window.addEventListener("click", init, false);

// Get modal element
const modal = document.getElementById("myModal");
const modal1 = document.getElementById("myModal1");

// Get the button that opens the modal
const mdl = document.getElementById("openModal");
const mdl1 = document.getElementById("openModal1");

// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];

// When the user clicks the image, open the modal
mdl.onclick = function () {
  modal.style.display = "block";
};

mdl1.onclick = function () {
  modal1.style.display = "block";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target === modal) {
    modal.style.display = "none";

  }
  if (event.target === modal1) {
    modal1.style.display = "none";

  }
};

///////////////

function init(e) {
  if (!e.target.closest(".item")) return;
  let hero = document.querySelector('div[data-pos="0"]');
  let target = e.target.parentElement;
  [target.dataset.pos, hero.dataset.pos] = [
    hero.dataset.pos,
    target.dataset.pos,
  ];
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
}


.gallery {
  position: relative;
  width: 990px;
  height: 605px;

  &:hover :not(div[data-pos="0"], img) {
    cursor: pointer;
  }

  & .item {
    position: absolute;
    width: 175px;
    height: 150px;
    overflow: hidden;
    transition: transform 0.9s, width 0.9s, height 0.9s;

    & img {
      width: 100%;
      height: 100%;
    }
  }

  & div[data-pos="0"] {
    width: 600px;
    height: inherit;
    z-index: 10;
  }
}

div[data-pos="0"] {
  transform: translate(0, 0);
}
div[data-pos="1"] {
  transform: translate(620px, 0);
}
div[data-pos="2"] {
  transform: translate(815px, 0);
}
div[data-pos="3"] {
  transform: translate(620px, 170px);
}
div[data-pos="4"] {
  transform: translate(815px, 170px);
}

@media (max-width: 800px) {
  .gallery {
    width: 405px;
    height: 660px;

    & .item {
      width: 200px;
      height: 150px;
    }

    & div[data-pos="0"] {
      width: inherit;
      height: 350px;
      // z-index: 1;
    }
  }

  div[data-pos="0"] {
    transform: translate(0, 0);
  }
  div[data-pos="1"] {
    transform: translate(0, 355px);
  }
  div[data-pos="2"] {
    transform: translate(0, 510px);
  }
  div[data-pos="3"] {
    transform: translate(205px, 355px);
  }
  div[data-pos="4"] {
    transform: translate(205px, 510px);
  }
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: fit-content; /* Could be more or less, depending on screen size */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.gallery img {
  width: 100%; /* Adjust as needed */
  margin-bottom: 20px;
  width: 100px; /* Thumbnail size */
  // margin: 10px;
  transition: transform 0.2s; /* Animation */
}

//////////////
<div class="wrapper">   
<img
      id="openModal"
      src="https://images.unsplash.com/photo-1578054330576-3f6646e38b1b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Open Modal"
      style="width: 100%; max-width: 300px"
    />

    <!-- Modal Structure -->
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <div class="gallery">
          <!-- Gallery Images Here -->
          <main class="gallery">
            <div class="item" data-pos="0">
              <img
                src="https://plus.unsplash.com/premium_photo-1661456395657-049a92e01522?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
            <div class="item" data-pos="1">
              <img
                src="https://images.unsplash.com/photo-1580151134699-e0cfbeb763d3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
            <div class="item" data-pos="2">
              <img
                src="https://images.unsplash.com/photo-1549488497-94b52bddac5d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
            <div class="item" data-pos="3">
              <img
                src="https://images.unsplash.com/photo-1523264114838-feca761983c4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
            <div class="item" data-pos="4">
              <img
                src="https://images.unsplash.com/photo-1542764824-4cdbd6c92dbe?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
          </main>

          <!-- Add other images similarly -->
        </div>
      </div>
    </div>

    <!-- Trigger Button 2nd -->
    <img
      id="openModal1"
      src="https://plus.unsplash.com/premium_photo-1661340932540-c285e730728a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Open Modal"
      style="width: 100%; max-width: 300px"
    />

    <!-- Modal Structure -->
    <div id="myModal1" class="modal modal1">
      <div class="modal-content">
        <span class="close">&times;</span>
        <div class="gallery">
          <!-- Gallery Images Here -->
          <main class="gallery">
            <div class="item" data-pos="0">
              <img
                src="https://images.unsplash.com/photo-1525258946800-98cfd641d0de?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
            <div class="item" data-pos="1">
              <img
                src="https://images.unsplash.com/photo-1628046276142-a614ec8c5504?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
            <div class="item" data-pos="2">
              <img
                src="https://plus.unsplash.com/premium_photo-1664530452440-e0cbce3869c0?q=80&w=1972&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
            <div class="item" data-pos="3">
              <img
                src="https://images.unsplash.com/photo-1593575620619-602b4ddf6e96?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
            <div class="item" data-pos="4">
              <img
                src="https://images.unsplash.com/photo-1615164631286-c9a3fd24e3ad?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              />
            </div>
          </main>

        </div>
      </div>
    </div>
</div>

javascript arrays image-gallery
1个回答
0
投票

你可以这样做（使用真正的 

<dialog>
元素和 JS 
.showModal()
方法。

const
  myModalDialog = document.querySelector('#modal-dial')
  ;
document.querySelector('div.wrapper').addEventListener('click', ({target})=>
  {
  if (!target.matches('img[data-modal]')) return
    ;
  myModalDialog.className = target.dataset.modal;
  myModalDialog.showModal();
  })

myModalDialog.addEventListener('click', ({target}) =>
  {
  if (target.matches('.close'))
    {
    myModalDialog.close();
    return; 
    }
  if ( !target.matches('img')) return
    ;
  const 
    small = target.closest('.item')
  , pos   = small.dataset.pos
  , bigg  = small.closest('.gallery').querySelector('.item[data-pos="0"]')
    ;
  if (small===bigg) return
    ;
  small.dataset.pos = '0';
  bigg.dataset.pos  = pos;
  })
* {
  margin      : 0;
  padding     : 0;
  box-sizing  : border-box;
  }
body {
  height      : 100svh;
  display     : grid;
  place-items : center;
  }
.wrapper img {
  width  : 300px;
  cursor : pointer;
  }
dialog {
  position : relative;
  margin   : auto;
  border   : none;
  padding  : 20px;
  outline  : none;
  }
dialog::backdrop {
  background-color: #7fffd49f;
  }
.gallery {
  position : relative;
  width    : 990px;
  height   : 605px;
  }
.gallery .item:not([data-pos="0"]) {
  cursor: pointer;
  }
.gallery .item {
  position   : absolute;
  width      : 175px;
  height     : 150px;
  overflow   : hidden;
  transition : transform 0.9s, width 0.9s, height 0.9s;
  }
.gallery .item img {
  width  : 100%;
  height : 100%;
  }
.gallery .item[data-pos="0"] {
  width     : 600px;
  height    : inherit;
  transform : translate(0, 0);
  z-index   : 10;
  }
.gallery .item[data-pos="1"] { transform: translate(620px,   0);   }
.gallery .item[data-pos="2"] { transform: translate(815px,   0);   }
.gallery .item[data-pos="3"] { transform: translate(620px, 170px); }
.gallery .item[data-pos="4"] { transform: translate(815px, 170px); }

@media (max-width: 800px) {
  .gallery {
    width  : 405px;
    height : 660px;
    }
  .gallery .item {
    width  : 200px;
    height : 150px;
    }
  .gallery .item[data-pos="0"] {
    width  : inherit;
    height : 350px;
    }
  .gallery .item[data-pos="0"] { transform: translate(  0,     0  ); }
  .gallery .item[data-pos="1"] { transform: translate(  0,   355px); }
  .gallery .item[data-pos="2"] { transform: translate(  0,   510px); }
  .gallery .item[data-pos="3"] { transform: translate(205px, 355px); }
  .gallery .item[data-pos="4"] { transform: translate(205px, 510px); }
  }

dialog.modal_0 > article:not(.modal_0) ,
dialog.modal_1 > article:not(.modal_1) {
  display: none;
  }
  
.close {
  color       : #aaa;
  float       : right;
  font-size   : 28px;
  font-weight : bold;
  cursor      : pointer;
  transform   : translate(18px, -24px)
  }
.close:hover { 
  color: black; 
  }
<div class="wrapper">
  <img alt="" data-modal="modal_0"
    src="https://images.unsplash.com/photo-1578054330576-3f6646e38b1b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  >
  <img  alt="" data-modal="modal_1"
    src="https://plus.unsplash.com/premium_photo-1661340932540-c285e730728a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  >
</div>

<dialog id="modal-dial" class="modal_0">
  <span class="close">&times;</span>
  <article class="gallery modal_0">
    <div class="item" data-pos="0">
      <img
        src="https://plus.unsplash.com/premium_photo-1661456395657-049a92e01522?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
    <div class="item" data-pos="1">
      <img
        src="https://images.unsplash.com/photo-1580151134699-e0cfbeb763d3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
    <div class="item" data-pos="2">
      <img
        src="https://images.unsplash.com/photo-1549488497-94b52bddac5d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
    <div class="item" data-pos="3">
      <img
        src="https://images.unsplash.com/photo-1523264114838-feca761983c4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
    <div class="item" data-pos="4">
      <img
        src="https://images.unsplash.com/photo-1542764824-4cdbd6c92dbe?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
  </article>

  <article class="gallery modal_1">
    <div class="item" data-pos="0">
      <img
        src="https://images.unsplash.com/photo-1525258946800-98cfd641d0de?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
    <div class="item" data-pos="1">
      <img
        src="https://images.unsplash.com/photo-1628046276142-a614ec8c5504?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
    <div class="item" data-pos="2">
      <img
        src="https://plus.unsplash.com/premium_photo-1664530452440-e0cbce3869c0?q=80&w=1972&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
    <div class="item" data-pos="3">
      <img
        src="https://images.unsplash.com/photo-1593575620619-602b4ddf6e96?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
    <div class="item" data-pos="4">
      <img
        src="https://images.unsplash.com/photo-1615164631286-c9a3fd24e3ad?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      />
    </div>
  </article>

</dialog>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.