how to expand an image on click with JS?-CodePudding

I created a gallery using the following

Use for loop to add onclick for every <div 4">

style.backgroundImage = url('22.png')
.slice(4, -1).replace(/['"]/g, "") will create a string from url("22.png"), select "22.png", then replace ' or " if exist.
The final result will be 22.png.



    
CodePudding user response：

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,_image_taken_by_NASA's_Hubble_Space_Telescope,_June_2019_-_Edited.jpg/801px-Jupiter,_image_taken_by_NASA's_Hubble_Space_Telescope,_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's_Voyager_2_(remastered).png/800px-Uranus_as_seen_by_NASA's_Voyager_2_(remastered).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  id="ponudba">
        <div >
          <div >
            <div  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  id="image-02" src="https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg"></div>  
            <div  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  id="image-04" src="https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg"></div>
          </div> 
          
          <div >
            <div  id="image-05" src="https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93"></div>  
            <div  id="image-06" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter,_image_taken_by_NASA's_Hubble_Space_Telescope,_June_2019_-_Edited.jpg/801px-Jupiter,_image_taken_by_NASA's_Hubble_Space_Telescope,_June_2019_-_Edited.jpg"></div>
            <div  id="image-07" src="https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d"></div>
          </div>
          
          <div ">
            <div  id="image-08" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA's_Voyager_2_(remastered).png/800px-Uranus_as_seen_by_NASA's_Voyager_2_(remastered).png"></div> 
            <div  id="image-09" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg"></div>
            <div  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" >
      <span >&times;</span>
      <img  id="image-modal"></div>
          </div> 
</div>