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 >

  <section >
    <div >
      <div >
        <img id="imageBox1" src="https://cdn.pixabay.com/photo/2013/04/02/18/58/sculpture-99484_960_720.jpg" alt="">
      </div>
      <div >
        <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 >
      <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.

CodePudding user response：

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

<div >
  <div >
    <img src=""  />
  </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

CodePudding user response：

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

<div id="myModal" >
  <div >
    <span >&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