javascript - PHP How to make zoom in zoom out scroll

Question

So I had a question how to make my scrollbar draggable and make it to zoom in and out in img like in snapchat? And when zoomed in that you could drag the img ?

So this how my scroll bar looks (PRESS TO SHOW)

My code:

 <div class="zoom">
  <div class="overlap-group-1">
    <div class="zoom-closed">
      <div class="overlap-group2-2">
        <img
          class="zoomlinija"
          src="https://anima-uploads.s3.amazonaws.com/projects/6007eda18fd1967b18a1ae8f/releases/6007edfb5dff9609b93fc42e/img/[email protected]"
        />
        <div class="zoomtrikampis"></div>
      </div>
    </div>
    <div class="zoom-opened">
      <div class="overlap-group-1">
        <img
          class="zoom-exit-but"
          src="https://anima-uploads.s3.amazonaws.com/projects/6007eda18fd1967b18a1ae8f/releases/6007edfb5dff9609b93fc42e/img/[email protected]"
        />
        <div class="zoomback"></div>
        <div class="zoomslanki-jimo-erdve"></div>
        <div class="zoomslankiklis"></div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function(){
      /* U?daro menu: */
      $('.zoom-closed').click(function(){
          $('.zoom-closed').css("display","none");
          $('.zoom-opened').css("display","flex");    
      });
      /* Atidaro menu: */
      $('.zoom-exit-but').click(function(){
          $('.zoom-closed').css("display","flex");
          $('.zoom-opened').css("display","none");
      });
  });

Image that I want to zoom and out

Its code:

    <!-- Map -->
<div class="zemelapis">
  <div class="overlap-group4-1">
    <img
      class="zemelapismain"
      src="https://anima-uploads.s3.amazonaws.com/projects/6007eda18fd1967b18a1ae8f/releases/6007edfb5dff9609b93fc42e/img/[email protected]"
    />
    <img
      class="zemelapishover"
      src="https://anima-uploads.s3.amazonaws.com/projects/6007eda18fd1967b18a1ae8f/releases/6007f1d0eed5cee55ba5d908/img/[email protected]"
    />
    <?php require('dots.php'); ?> <!-- Adds circles -->
  </div>
</div>

question from:https://stackoverflow.com/questions/65841818/php-how-to-make-zoom-in-zoom-out-scroll

Answer 1

Waitting for answers