How to open an image in a window when clicked?

Question

JavaScript

Good day, friends. I installed the Slick slider myself, the settings are as follows:

<script type="text/javascript">
        $('.sl').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          autoplay: true,
          prevArrow: '<div class="prevg"><img src="../img/icon/arrow_prew.png"></div>',
          nextArrow: '<div class="nextarr"><img src="../img/icon/arrow_next.png"></div>',
          autoplaySpeed: 2000,
        });
        </script>

Created an area with slides where there are images. But they are not edible. How to make images in a slide open in a modal window?
Thank you very much in advance!

Answer 1

Install a plugin for viewing images in a modal window, such as fancybox or something easier.

Answer 2

Hello!
You can do it like a modal window with background dimming. Something like this:
HTML:

<p id="test">
      <img src="1.jpg" alt="Image" title="Image" width="200" id="img">
    </p>

JS(jQuery):

$(document).ready(function () {
        $("#img").on("click" , function (event) {
      var ready = 0
            $(event.target).parent().css("text-align", "center");
            $(event.target).animate ({
                width: $(event.target).width() * 5,
                height: $(event.target).height() * 5,
            } , 3000);
      var ready = 1
      if (ready == 1) {
        $('body').css("background", "#616161")
      }
        });
    });