-2

I am developing a site where I have a css grid with images.

 <div class="popup">
       
 </div>
 <div class="grid">
       <div class="img">
               <img src="...">
       </div>
       <div class="img">
               <img src="...">
       </div>
       <div class="img">
               <img src="...">
       </div>
 </div>

I am doing this

$(".img").mousedown(function(){
      setTimeout(function(){
            $(".popup").fadeIn(150);
        $(".popup").append($(this).clone());
      }, 1000);
}).mouseup(function(){
     $(".popup").fadeOut(150);
     $(".popup").children().remove();
});

But this doesn't work like instagram. It even display when I click. But I want popup exactly like instagram, on longpress.

Any other ways too will be appreciated? Please help.

asktostackoverflow
  • 23
  • 4

1 Answers1

1

You use this keyword in an arrow function. So it's not binded to anything. Using a regular function the this keyword is now binded to the image element.

$(".img").mousedown(function() {
  setTimeout(()=>{
    $(".popup").fadeIn(150);
    $(".popup").append($(this).clone());
  }, 1000);
}).mouseup(()=>{
   $(".popup").fadeOut(150);
   $(".popup").children().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="popup">

</div>

<div class="grid">
 <div class="img">
  <img src="...">
 </div>
 <div class="img">
  <img src="...">
 </div>
 <div class="img">
  <img src="...">
 </div>
</div>

According to the long press feature you need.

$('.grid img').mousedown(function() {
  $('.popup').append($(this).clone());
});

$('body').mouseup(function() {
  $('.popup').empty();
});
.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.grid img {
  width: 50px;
  height: 50px;
}

.popup {
  position: absolute;
}

img {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="grid">
    <img src="https://picsum.photos/id/1/300">
    <img src="https://picsum.photos/id/2/300">
    <img src="https://picsum.photos/id/3/300">
  </div>
  
  <div class="popup"></div>
</div>
Kostas
  • 1,903
  • 1
  • 16
  • 22