how to click on image so view large

**Dormilich** · Oct 22 '13, 08:34 PM

Lightbox ?

**Sherin** · Oct 23 '20, 04:56 AM

Try This Code

Code:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2> Image Gallery</h2>
  <p>Click on the images to display them in full size.</p>
</div>

<div class="w3-row-padding">
  <div class="w3-container w3-third">
    <img src="img_snowtops.jpg" style="width:100%;cursor:pointer" 
    onclick="onClick(this)" class="w3-hover-opacity">
  </div>
  <div class="w3-container w3-third">
    <img src="img_lights.jpg" style="width:100%;cursor:pointer" 
    onclick="onClick(this)" class="w3-hover-opacity">
  </div>
  <div class="w3-container w3-third">
    <img src="img_mountains.jpg" style="width:100%;cursor:pointer" 
    onclick="onClick(this)" class="w3-hover-opacity">
  </div>
</div>

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
  <div class="w3-modal-content w3-animate-zoom">
    <img id="img01" style="width:100%">
  </div>
</div>

<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>
            
</body>
</html>

**SwissProgrammer** · Oct 26 '20, 11:53 PM

Sherin,

Nice.

Ahtisham,

You might want to refresh the elements as soon as they are removed so that they zoom in each time that they are clicked. Currently they zoom in the first time, then after being clicked on and removed they simply show up without the zoom. Sherin gave you some nice code. Let us see how you create that new-zoom effect each time that the same one is clicked.

Thanks.

how to click on image so view large

how to click on image so view large

Comment

Comment

Comment