How to make the images bigger when clicked? JavaScrpit

user_16445644 0
Viewed 1121

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.

enter image description here

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.

onclick fullscreen css image javascript
2 Answers

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

user_178898340

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

user_48739100
Related