Friday, July 29, 2022

[FIXED] how to expand an image on click with JS?

      , , , ,      No comments   

Issue

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>


Solution

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>



Answered By - fullstackgenerator
Answer Checked By - Gilberto Lyons (PHPFixing Admin)

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...