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

Question

I've made a gallery, but I'm having trouble getting the image to enlarge when clicked. I want to be able to click on the largest image and then it will enlarge and appear in the middle of the page.

Below is the link to the code:

 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

Thank you in advance for your help.

Answer 1

You need to create a popup window with an image element inside:

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

In CSS you need to make the backdrop element as fixed:

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

So your element will be pulled to each side

The popup element will have absolute positioning:

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

And finally img element should have max-width as 100% .

Also you need to make open/close functionality, to do that you need to set display: block/none on the backdrop element accordingly on click

Answer 2

You can use a modal for this. Have a image tag inside the modal, and hide the entire modal by default.

<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;
}

When the image is clicked, show the modal and set the src of the modal image to which image triggered the event.

// 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;
};

You can also add a "X" that will close the modal as I added in my example below:

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