Skip to content
Advertisement

how to expand an image on click with JS?

I created a gallery using the following codepen and now I’m trying to add the function click to expand an image, using this JS method. Sadly I cannot get it to work.

Any advice would be very helpful, either regarding this expand option or an alternative. Mind you I’m completely new to JS.

Thanks in advance!

var modal = document.getElementById('myModal');

var img = document.getElementById('myImg');
var modalImg = document.getElementById("image");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
}
/*main div*/

.ponudba {
  background-color: rgb(0, 0, 0);
  z-index: 3;
}

.image-grid {
  padding: 12px;
}

.image-row {
  display: flex;  
}

.image-row .image {
  margin: 12px;
  height: 220px;  
}

.image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 3px;
  transition-duration: 0.5s;
  filter: contrast(75%);
  transition: all 0.3s ease-in;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3), 
              0 3px 4px rgba(0, 0, 0, 0.15),
              0 3px 4px rgba(0, 0, 0, 0.7);
              margin: 0 0 0 15%;
  display: block;
  height: 100vh;
  max-width: 100%;
  animation-name: zoom;
  animation-duration: 0.6s;
  z-index: 3;
}

.image:hover {
  filter: contrast(100%);
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.image-01 {
  background-image: url(images/...jpg); 
  flex: 2;
  background-position: 50% 60%;  
}

.image-02 {
  background-image: url(images/...jpg); 
  flex: 1.2;  
}

.image-03 {
  background-image: url(images/...jpg); 
  flex: 1.5;
  background-position: 50% 70%;   
}

.image-04 {
  background-image: url(images/...jpg); 
  flex: 3;
  background-position: 50% 60%;
}

.image-05 {
  background-image: url(images/...jpg); 
  flex: 3;
}

.image-06 {
  background-image: url(images/...jpg); 
  flex: 2;  
}

.image-07 {
  background-image: url(images/...jpg); 
  flex: 1.5;
}

.image-08 {
  background-image: url(images/...jpg);  
  flex: 2.5;
  background-position: 50% 70%;
}

.image-09 {
  background-image: url(images/...jpg);  
  flex: 1;
}
.image-10 {
  background-image: url(images/...jpg);  
  flex: 3;
  background-position: 50% 80%;
}
#myImg {
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

@keyframes zoom {
  from {transform: scale(0.1)} 
  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%;
  }
  .image-row {
    flex-direction: column;
  }
  
  .image-row .image {
    flex-basis: auto;
  }
}
    <div class="ponudba" id="ponudba">
    <div class="image-grid">
      <div class="image-row">
        <div class="image image-01" id="image-01"></div> 
        <div class="image image-02" id="image-02"></div>  
        <div class="image image-03" id="image-03"></div>  
        <div class="image image-04" id="image-04"></div>
        
      </div> 
      <div class="image-row">
        <div class="image image-06" id="image-06"></div>  
        <div class="image image-05" id="image-05"></div>
        <div class="image image-07" id="image-07"></div>
      </div>
      <div class="image-row">
        <div class="image image-08" id="image-08"></div> 
        <div class="image image-09" id="image-09"></div>
        <div class="image image-10" id="image-10"></div>  
      </div>
    </div>  
         <div id="myModal" class="modal">
          <span class="close">&times;</span>
          <img class="modal-content" id="image">
         </div>
        </div>

Advertisement

Answer

So after asking a collegue for help, this is what I got – an image gallery with clickable images.

Here’s the pen: https://codepen.io/fullstackgenerator/pen/YzaqYdb

var modal = document.getElementById('Modal');

var imgaes = document.getElementsByClassName('image');
var modalImg = document.getElementById("image-modal");
imgaes = [].slice.call(imgaes);

console.log(imgaes);

imgaes.forEach(function(item){
    item.onclick = function(){
  modal.style.display = "block";
      
  modalImg.src = this.getAttribute('src');
}
})

var span = document.getElementsByClassName("close")[0];

modalImg.onclick = function() { 
  modal.style.display = "none";
}
body {
  margin: 0;
  background-color: rgb(0, 0, 0);
 }

.ponudba {
  position: relative;
  background-color: rgb(0, 0, 0);
  height: 100vh;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 6;
}

.image-grid {
  padding: 12px;
}

.image-row {
  display: flex;  
}

.image-row .image {
  margin: 12px;
  height: 220px;  
}

.image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 3px;
  height: 95%;
  max-width: 100%;
}

.image:hover {
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.image-01 {
  background-image: url(https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg); 
  flex: 2;
  background-position: 50% 60%;  
}

.image-02 {
  background-image: url(https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg); 
  flex: 1.2;  
}

.image-03 {
  background-image: url(https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive$&wid=700&qlt=90,0&resMode=sharp2); 
  flex: 1.5;
  background-position: 50% 70%;   
}

.image-04 {
  background-image: url(https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg); 
  flex: 3;
  background-position: 50% 60%;
}

.image-05 {
  background-image: url(https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93); 
  flex: 3;
}

.image-06 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg); 
  flex: 2;  
}

.image-07 {
  background-image: url(https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d); 
  flex: 1.5;
}

.image-08 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png);  
  flex: 2.5;
}

.image-09 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg);  
  flex: 1;
}
.image-10 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg);  
  flex: 3;
}

#myImg {
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
margin: auto;
  display: block;
   animation-name: zoom;
  animation-duration: 0.6s;
}

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

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  .image-row {
    flex-direction: column;
  }
  
  .image-row .image {
    flex-basis: auto;
  }
}
<!--a BIG thank you to @awecodeman!-->

<div class="ponudba" id="ponudba">
        <div class="image-grid">
          <div class="image-row">
            <div class="image image-01" id="image-01" src="https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg"></div> 
            <div class="image image-02" id="image-02" src="https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg"></div>  
            <div class="image image-03" id="image-03" src="https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive$&wid=700&qlt=90,0&resMode=sharp2"></div>  
            <div class="image image-04" id="image-04" src="https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg"></div>
          </div> 
          
          <div class="image-row">
            <div class="image image-05" id="image-05" src="https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93"></div>  
            <div class="image image-06" id="image-06" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg"></div>
            <div class="image image-07" id="image-07" src="https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d"></div>
          </div>
          
          <div class="image-row"">
            <div class="image image-08" id="image-08" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png"></div> 
            <div class="image image-09" id="image-09" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg"></div>
            <div class="image image-10" id="image-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg"></div>     
                                                       <div id="Modal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content image" id="image-modal"></div>
          </div> 
</div>
Advertisement