Почему событие click не вызывает его родителя в magnifi c -popup? - PullRequest
Новая
       21

Почему событие click не вызывает его родителя в magnifi c -popup?

0 голосов
/ 27 апреля 2020

Когда я нажимаю .mfp-img, событие не срабатывает до .mfp-wrap и останавливается в .mfp-container, и я не могу понять, почему это происходит. 

var clickedImgIndex;
$(".galleryList").magnificPopup({
  delegate: ".zoomOnHover" ,
  type: "image" ,
  gallery: { enabled : true } ,
  removalDelay : 650 ,
  image: {
    cursor: 'mfp-zoom-out-cur',
    titleSrc: function(item){
    clickedImgIndex = item.index;
    return "<small>Photo Title</small>";
  } ,
  verticalFit: true
 }
   });

$(".zoomOnHover").click(function(){
 var boundPositionImg = positionImg.bind(this);
setTimeout(boundPositionImg,0);
});

function positionImg() {
  var mfpContent = $(".mfp-content") ,
  link = $(this) ,
  linkWidth = link.outerWidth() ,
  linkX = link.offset().left ,
  linkY = link.offset().top ,
  mfpContentWidth = mfpContent.outerWidth(),
  closeAndBar = $(".mfp-close , .mfp-bottom-bar");

  closeAndBar.css({
   opacity:0
   });

   mfpContent.css({
    width: linkWidth + "px" ,
    visibility: "visible"
   });

    mfpContent.offset({
     top: linkY - 40 ,
     left: linkX
     });

     mfpContent.animate({
      width: mfpContentWidth + "px" ,
      top:0 ,
      left:0
   } , 500);

setTimeout(function(){
    closeAndBar.css({
    opacity:1
 });
} , 750);


zoomOnHovers = link.closest(".pageContent").find(".zoomOnHover") ;
$(".mfp-wrap").click(function(e){ 
console.log("Wrap event triggered");
var arrows = $(".mfp-arrow-right , .mfp-arrow-left") ,
currentLink = zoomOnHovers.filter(":eq(" + clickedImgIndex + ")") ,
target = e.target ,
mfpFigure = $(".mfp-figure");

if( (target !== arrows[0]) && (target !== arrows[1]) && (target !== mfpContent[0]) ){
  linkWidth = currentLink.outerWidth();
  linkX = currentLink.offset().left;
  linkY = currentLink.offset().top;


  closeAndBar.css({
    opacity:0
  });

  mfpContent.css({
    width: linkWidth + "px" ,
    position: "static"
  });

  mfpContent.offset({
    top: linkY - 40 ,
    left: linkX
  });

}
else{
  mfpContent.css({
    width: ""
  });
  mfpContent.css({
    width : mfpContent.outerWidth() + "px"
    });
  }
 });
}
a{
 display:block;
}
ul{
 list-style-type:none;
 padding:0;
 margin:0;
}
img{
 max-width:100%;
}
.filter-gallery{
 width:25%;
 float:left;
}
.mfp-content{
  visibility: hidden;
  transition: all 0.5s ease-out;
}
<html>
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
  <meta name = "viewport" content = "width=device-width,initial-scale=1,shrink-to-fit=no" />

</head>
<body>
 <section class="pageContent">
  <div class="galleryList">
    <ul class="clearfix">
     <li class="filter-gallery">
      <a class="zoomOnHover" href="http://demo.themesurf.com/plumbing/image/gallery/g8-lg.jpg">
        <div class="item">
          <img src="http://demo.themesurf.com/plumbing/image/gallery/g8-lg.jpg" alt="">
          </div>
      </a>
      </li>
      <li class="filter-gallery">
        <a class="zoomOnHover" href="http://demo.themesurf.com/plumbing/image/gallery/g7-lg.jpg">
          <div class="item">
            <img src="http://demo.themesurf.com/plumbing/image/gallery/g7-lg.jpg" alt="">
          </div>
         </a>
       </li>
       <li class="filter-gallery">
         <a class="zoomOnHover" href="http://demo.themesurf.com/plumbing/image/gallery/g4-lg.jpg">
           <div class="item">
              <img src="http://demo.themesurf.com/plumbing/image/gallery/g4-lg.jpg" alt="">
            </div>
          </a>
        </li>
        <li class="filter-gallery">
          <a class="zoomOnHover" href="http://demo.themesurf.com/plumbing/image/gallery/g1-lg.jpg">
            <div class="item">
               <img src="http://demo.themesurf.com/plumbing/image/gallery/g1-lg.jpg" alt="">
             </div>
           </a>
        </li>
    </ul>
  </div>
 </section>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
</body>
</html>

Как видите, при нажатии на изображение журнал не отображается, но при нажатии на стрелки влево и вправо и кнопку закрытия отображается журнал и событие срабатывает на .mfp-wrap.

Почему это происходит и как я могу это исправить?

Спасибо

...