Breaking News: Grepper is joining You.com. Read the official announcement!

jquery image enlarge

Adam, the developer answered on May 18, 2023 Popularity 1/10 Helpfulness 8/10

answer jquery image enlarge

jquery image enlarge

Comment

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Enlarge on Click</title>
    <style>
      #image-container {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
      }
      img {
        transition: transform 0.3s ease-in-out;
        cursor: pointer;
      }
      #modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 9999;
      }
      #modal-image {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 90%;
        max-width: 90%;
      }
    </style>
  </head>
  <body>
    <div id="image-container">
      <img
        id="myImage"
        src="https://s2.dmcdn.net/v/GB7wB1ZemVv6aR8tG/x480"
        alt="Your Image"
      />
    </div>


    <div id="modal">
    <img
        id="modal-image"
        src="https://s2.dmcdn.net/v/GB7wB1ZemVv6aR8tG/x480"
        alt="Your Image"
    />
    </div>

  </body>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
    $(document).ready(function () {
      let isEnlarged = false;
      let zoomLevel = null;

        $('#modal-image').draggable();

      $("#myImage").click(function (e) {
        const modal = $("#modal");
        const modalImage = $("#modal-image");
        const image = $(this);
        const x = e.offsetX / image.width();
        const y = e.offsetY / image.height();

        modalImage.css({
          "transform-origin": `${x * 100}% ${y * 100}%`,
          transform: `scale(${zoomLevel})`,
        });
        modalImage.attr("src", image.attr("src"));
        modal.css("display", "block");
        isEnlarged = true;

        modalImage.on("wheel", function (e) {
          e.preventDefault();

          zoomLevel += e.originalEvent.deltaY * -0.01;
          zoomLevel = Math.max(0.1, zoomLevel);
          zoomLevel = Math.min(5, zoomLevel);

          modalImage.css({
            "transform-origin": `${x * 100}% ${y * 100}%`,
            transform: `scale(${zoomLevel})`,
          });
        });
      });

      $("#modal").click(function () {
        const modal = $(this);
        const modalImage = $("#modal-image");

        modal.css("display", "none");
        isEnlarged = false;
        zoomLevel = null;
        modalImage.off("wheel");
      });
    });
  </script>
</html>

Popularity 1/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: image-enlarge javascript jquery

Link to this answer
Share Copy Link

Contributed on May 18 2023

Adam, the developer

0 Answers Avg Quality 2/10

jquery image enlarge

Contents

More Related Answers

jquery image enlarge

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.