單擊時如何使影像變大？JavaScript

我已經制作了一個圖庫，但是在單擊時無法放大影像。我希望能夠點擊最大的影像，然后它會放大并出現在頁面中間。

下面是代碼的鏈接：

function galleryFunction1(smallImg) {
  let fullImg = document.getElementById('imageBox1');
  fullImg.src = smallImg.src;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
}

.gallery {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 100px 10px;
}

.gallery img {
  cursor: pointer;
}

.boxOfimages .big-img img {
  display: block;
  margin: 0 auto;
  width: 290px;
  margin-bottom: 10px;
}

.boxOfsmallImgs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.boxOfsmallImgs img {
  width: 70px;
  opacity: 0.7;
  transition: opacity 0.4s ease;
  margin: 2px;
}

.boxOfsmallImgs img:hover {
  opacity: 1;
}


}
.boxOftext {
  display: flex;
  flex-direction: column;
  align-items: start;
  font-size: 0.8rem;
}
.boxOftext h2 {
  padding: 20px 10px;
}
.boxOftext p {
  padding: 10px 10px;
}

<main class="main wrapper">

  <section class="gallery">
    <div class="boxOfimages">
      <div class="big-img">
        <img id="imageBox1" src="https://cdn.pixabay.com/photo/2013/04/02/18/58/sculpture-99484_960_720.jpg" alt="">
      </div>
      <div class="boxOfsmallImgs">
        <img src="https://cdn.pixabay.com/photo/2013/04/02/18/58/sculpture-99484_960_720.jpg" onclick="galleryFunction1(this)" alt="">
        <img src="https://cdn.pixabay.com/photo/2016/09/07/16/19/pile-1651945_960_720.jpg" onclick="galleryFunction1(this)" alt="">

        <img src="https://cdn.pixabay.com/photo/2018/05/11/08/11/pet-3389729_960_720.jpg" onclick="galleryFunction1(this)" alt="">
      </div>
    </div>
    <div class="boxOftext">
      <h2>“Dotyk burzy” / “Touch of Storm”</h2>
      <p>rze?ba / sculpture gips patynowany, granit / patinated plaster, granite 100 x 28 x 28 cm 2020r.
      </p>
      <p>dost?pna</p>
    </div>
  </section>

https://codepen.io/yerbamatepl/pen/mdBGoed

預先感謝您的幫助。

uj5u.com熱心網友回復：

您需要創建一個彈出視窗，其中包含一個影像元素：

<div class="backdrop">
  <div class="popup">
    <img src="" class="popup-image" />
  </div>
</div>

在 CSS 中，您需要將backdrop元素設為固定：

position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;

所以你的元素將被拉到每一邊

該popup元素將具有絕對定位：

position: absolute;
width: 500px;
height: auto;
top: 50%; // to put it in the middle
left: 50%;
transform: translate(-50%, -50%);

最后 img 元素應該具有max-widthas 100%。

您還需要創建打開/關閉功能，為此您需要在單擊時相應地display: block/none設定backdrop元素

uj5u.com熱心網友回復：

您可以為此使用模式。在模態框內有一個影像標簽，默認隱藏整個模態框。

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <img src="" id="modal-image" />
  </div>
</div>

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  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 {
  margin: auto;
  text-align: center;
}

.modal-image {
  display: inline-block;
}

單擊影像時，顯示模態并將src模態影像設定為觸發事件的影像。

// Get the gallery box
var imageBox1 = document.getElementById("imageBox1");

// Get the modal image tag
var modal = document.getElementById("myModal");

var modalImage = document.getElementById("modal-image");

// When the user clicks the big picture, set the image and open the modal
imageBox1.onclick = function (e) {
  var src = e.srcElement.src;
  modal.style.display = "block";
  modalImage.src = src;
};

您還可以添加一個“X”來關閉模式，正如我在下面的示例中添加的那樣：

https://codepen.io/swampen/pen/vYezMGx

標籤：

上一篇：如何創建光隧道變換影像

下一篇：如何將3Dniigz影像陣列重塑為2D？