单击时如何使图像变大？ JavaScript

Question

我制作了一个画廊，但我无法在单击时放大图像。我希望能够点击最大的图片，然后它会放大并出现在页面中间。

下面是代码的link：

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

预先感谢您的帮助。

Answer 1

您需要创建一个弹出窗口 window，其中包含图像元素：

<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-width 作为 100%。

您还需要实现 open/close 功能，为此您需要在 backdrop 元素上相应地设置 display: block/none 单击

Answer 2

您可以为此使用模式。在模态框内有图片标签，默认隐藏整个模态框。

<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

单击时如何使图像变大？ JavaScript

How to make the images bigger when clicked? JavaScrpit

javascript

css

image

fullscreen

onclick