CODEWITHSUNDEEP
javascripthtmlcss
Ntirpang Louis
Ntirpang Louis

Reputation: 35

How to make an Image Zoom with Javascript

I'm working on a web project and needed to make a gallery of images . And the images need to be Zoomed in when clicked on. But with my code only the first image Zooms.

How can i make all of them Zoom below is my source Code.

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* 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.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>

<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close" id="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
 function openModal(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementById('close');

// When the user clicks on <span> (x), close the modal
 function close() { 
    modal.style.display = "none";
}
span.addEventListener("click", close);
img.addEventListener("click", openModal);
</script>

</body>
</html>

Upvotes: 0

Views: 1680

Answers (5)

Vishal
Vishal

Reputation: 288

Try this

// Get the Modal and modal-img
let modal = document.querySelector("#myModal");
let modalImg = document.querySelector(".modal-img");

// Show Modal
function showModal(elem) {
  modal.classList.remove("hide");
  modalImg.setAttribute("src", elem.src);
}

// Hide Modal
function hideModal() {
  modal.classList.add("hide");
}

// Hide Modal when backdrop (black transparent area) is clicked
modal.onclick = function (event) {
  if(event.target === modal) {
    hideModal();
  }
}
* {
  box-sizing: border-box;
  font-family: sans-serif;
}

/* Style Modal Container */
.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .6);
  overflow: auto;
}

.hide {
  display: none;
}

/* Style Modal Content */
.modal-content {
  width: 75%;
  height: 75%;
  -webkit-animation: .4s slide;
  animation: .4s slide;
}

/* Adding Animation */
@-webkit-keyframes slide {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slide {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Style Modal Header */
.modal-header {
  display: -webkit-flex;
  -webkit-align-items: flex-start;
  -webkit-justify-content: space-between;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem;
  background-color: white;
}

/* Style Close Button */
.close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
  background-color: transparent;
  border: none;
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  opacity: .5;
  cursor: pointer;
}

/* Style Modal Body */
.modal-body {
  position: relative;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

/* Style Modal Image */
.modal-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
<p>Click the Images below:</p>

<!-- Image trigger Modal -->
<img onclick="showModal(this)" src="https://parrot-tutorial.com/images/carousel_red3.jpg" style="width: 300px;">
<img onclick="showModal(this)" src="https://parrot-tutorial.com/images/air_ballon.jpg" style="width: 300px;">
<img onclick="showModal(this)" src="https://parrot-tutorial.com/images/nature_autumn.jpg" style="width: 300px;">

<!-- *************** Modal *************** -->
<div class="modal hide" id="myModal" tabindex="-1">
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <button type="button" class="close" onclick="hideModal()">&times;</button>
    </div>

    <!-- Modal Body -->
    <div class="modal-body">
      <img class="modal-img" src="/images/carousel_3.jpg">
    </div>

  </div>
</div>

Reference:How To Create Modal Images

Upvotes: 0

Gaziz
Gaziz

Reputation: 26

Use classes instead id. Or, also, you can add event by inline.

//and your function will looks like:
 function openModal(element){
    modal.style.display = "block";
    modalImg.src = element.src;
    captionText.innerHTML = element.alt;
}
// and remove img.addEventListener("click", openModal);
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="openModal(this)">
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="openModal(this)">

Upvotes: 0

Jorge Fuentes Gonz&#225;lez
Jorge Fuentes Gonz&#225;lez

Reputation: 11809

An id name must be unique in the entire webpage. Otherwise, selectors will work only on the first one.

For having selectors work on multiple elements, classes where invented. You should change your code to be:

[...]
<img id="myImg1" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg2" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
[...]

The CSS:

[...]
.myImg {
     border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* 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.9); /* Black w/ opacity */
}
[...]

Notice how I changed the hash (#) for a dot (.).

Hash means select by id, and dot means select by class. You should follow the same principle for everything. Id when is going to be unique and class when is multiple.

Now we are going to select by class in the JS:

/*[...]*/
// Select all the images by class
var imgs = document.querySelectorAll('.myImg');

// Loop the array and add the logic to each one
imgs.forEach(function(img) {
    img.addEventListener("click", openModal);
});
/*[...]*/

Upvotes: 2

prasanth
prasanth

Reputation: 22500

You are using id for dom click. Id is unique .better use ClassName for selector instead of id .try with querySelectorAll() and forEach() for assign click event all image element 

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.querySelectorAll('.myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

function openModal() {
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementById('close');

// When the user clicks on <span> (x), close the modal
function close() {
  modal.style.display = "none";
}
span.addEventListener("click", close);
img.forEach(a=> a.addEventListener("click", openModal));
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* 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.9);
  /* Black w/ opacity */
}


/* Modal Content (image) */

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}


/* Caption of Modal Image */

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}


/* Add Animation */

.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}
<img id="myImg" class="myImg"src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close" id="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

Upvotes: 0

Muhammad Talha
Muhammad Talha

Reputation: 337

Do not use ID use classes. For example Use

.caption

Instead of

#caption

Upvotes: 0

Related Questions