Image not zooming on click

Question

0.00/5 (No votes)

See more:

Hello guys

I have some images on a website that I'll like to zoom out once clicked. All the images have the same class, but a different Id and I use the class in my jQuery code to get the Id of the image which has been clicked to apply the zoom effect on it, but nothing happens.

I don't know what I'm missing. Thanks in advance for helping me figure this out!

What I have tried:

The images code in HTML:

HTML

<div class="col-lg-4 mb-4">
  <div class="card h-100">
    <h4 class="card-header">Pizzas</h4>
    <div class="card-body">
      <p class="card-text">Seasoned appropriately, right ingredients in and cooked just to the point,
        our pizzas will conquer your palette!</p>
      <img class="meal_image" src="Images/Pizzas.jpg" alt="Pizzas Meal" id="pizzas">
    </div>
    <div class="card-footer">
      <a href="#" class="btn btn-block btn-info">Take this</a>
    </div>
  </div>
</div>
<div class="col-lg-4 mb-4">
  <div class="card h-100">
    <h4 class="card-header">Steelazani</h4>
    <div class="card-body">
      <p class="card-text">Everything measures, mixed and tasted to perfection inorder
        to make you feel the sublime deliciousness!</p>
        <img class="meal_image" src="Images/Steelazani.jpg" alt="Steelazani Meal" id="steelazani">
    </div>
    <div class="card-footer">
      <a href="#" class="btn btn-block btn-info">Take this</a>
    </div>
  </div>
</div>

Modal code (this is where the zoomed image should display):

HTML

<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

JS Code to zoom out clicked image in modal:

JavaScript

<script>
    $(document).on('click', '.meal_image', function(){
      alert("bonjout");
          // 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 image_Id = $(this).attr("id");
      var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");

    modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;

    /*image_Id.onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
    }
    });*/
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
    }
    </script>

Posted 4-May-20 12:26pm

Nice Kloe

Updated 5-May-20 3:03am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

TheRealSteveJudge · Accepted Answer · 2020-05-05T03:04:00

Your code reminds me of https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img[^]
This W3Schools example deals with one single image whose ID is known when zooming.
The problem is that you must supply the ID of the image, so that the zoom function knows which image to treat.

You must have an event handler for each single image e.g.

onclick="zoom('pizzas')

Please have a look at this example:

HTML

<pre><!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
    <script>
        function zoom(id){            
            // Get the modal
            var modal = document.getElementById("myModal");
            var img = document.getElementById(id);
            var modalImg = document.getElementById("img01");
            var captionText = document.getElementById("caption");                        
            modal.style.display = "block";
            modalImg.src = img.src;
            captionText.innerHTML = img.alt;
            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() { 
                modal.style.display = "none";
        }};
    </script>
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      
      #myImg {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
      }
      
      #myImg:hover {opacity: 0.7;}
      
      /* The Modal (background) */
      .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)}
      }
      
      /* The Close Button */
      .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;
      }
      
      /* 100% Image Width on Smaller Screens */
      @media only screen and (max-width: 700px){
        .modal-content {
          width: 100%;
        }
      }
      </style>
</head>
<body>
    <div class="col-lg-4 mb-4">
        <div class="card h-100">
          <h4 class="card-header">Pizzas</h4>
          <div class="card-body">
            <p class="card-text">Seasoned appropriately, right ingredients in and cooked just to the point,
              our pizzas will conquer your palette!</p>
            <img class="meal_image" src="Images/Pizzas.jpg" alt="Pizzas Meal" id="pizzas" onclick="zoom('pizzas')">
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-block btn-info">Take this</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mb-4">
        <div class="card h-100">
          <h4 class="card-header">Steelazani</h4>
          <div class="card-body">
            <p class="card-text">Everything measures, mixed and tasted to perfection inorder
              to make you feel the sublime deliciousness!</p>
              <img class="meal_image" src="Images/Steelazani.jpg" alt="Steelazani Meal" id="steelazani" onclick="zoom('steelazani')">
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-block btn-info">Take this</a>
          </div>
        </div>
      </div>
      <div id="myModal" class="modal">
        <span class="close">×</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
      </div>      
</body>