Question

我在我的网站组合中使用jQuery Magnific Popup。一切工作正常，除了放大的弹出窗口仅在第二次单击后打开。每当我使用shift + f5刷新时，就会发生这种情况。我认为这是因为我没有在href和img src中使用相同的链接。请帮我解决这个问题。

HTML

<a class="image-popup" href="https://designassociates.ltd/wp-content/uploads/2019/03/PEB-Office-Interior-6.jpg">
<img src="https://designassociates.ltd/wp-content/uploads/2019/03/PEB-Office-Interior-6-300x300.jpg" alt="Interior Design" width="263" height="263">
</a>       
 <a class="image-popup" href="https://designassociates.ltd/wp-content/uploads/2019/03/PEB-Office-Interior-7.jpg">
<img src="https://designassociates.ltd/wp-content/uploads/2019/03/PEB-Office-Interior-7-300x300.jpg" alt="Interior Design" width="263" height="263">
</a>

jQuery

$('.image-popup').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: true,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
     gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    callbacks: {
    buildControls: function() {
      // re-appends controls inside the main container
      this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
    }},
    image: {
      verticalFit: true
    },
    zoom: {
      enabled: true,
      duration: 300 // don't foget to change the duration also in CSS
    }
  });

JSFiddle：https://jsfiddle.net/1n6zrm4q/

第一次点击时，Magnific Popup无效

0 个答案: