Magnific Popup和Slick.js之間的衝突以及響應式設置

我正在嘗試在Magnific Popup Lightbox的響應式顯示中使用Slick.js旋轉木馬。Magnific Popup和Slick.js之間的衝突以及響應式設置

當光滑滑塊處於其基本形式時，它正在工作，但是當窗口足夠緊以觸發斷點並且「幻燈片顯示」較少時，Magnific Popup不再起作用，只需打開鏈接的圖片在新的縮略圖，我必須重新加載頁面，使其重新工作......

這裏是我的代碼：

<link rel="stylesheet" href="css/style.css" type="text/css"> 
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css"> 
<link rel="stylesheet" type="text/css" href="slick/slick.css"/> 
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 
<link rel="stylesheet" href="css/normalize.css" type="text/css"> 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>   
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>    
<script type="text/javascript" src="js/slick.js"></script> 
<script type="text/javascript" src="js/responsee.js"></script>

<!--Projet Un-->     
    <div class="proj_block"> 
     <div> 
      <div class="margin line"> 
       <div class="slick_slide s-12 l-6-slick center">    
        <a class="proj_un mfp-image" href="img/index-test-img-big.jpg"> 
          <img src="img/index-test-img.jpg"/> 
        </a> 
        <a class="proj_un mfp-image" href="img/index-test-img-big.jpg"> 
          <img src="img/index-test-img.jpg"/> 
        </a> 
        <a class="proj_un mfp-image" href="img/index-test-img-big.jpg"> 
          <img src="img/index-test-img.jpg"/> 
        </a> 
        <a class="proj_un mfp-image" href="img/index-test-img-big.jpg"> 
          <img src="img/index-test-img.jpg"/> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--Fin Projet Un--> 

    <!--Projet Deux-->   
    <div class="proj_block"> 
     <div> 
      <div class="margin line"> 
       <div class="slick_slide s-12 l-6-slick center"> 
        <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg"> 
          <img src="img/index-test-img.jpg"/> 
        </a> 
        <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg"> 
          <img src="img/index-test-img.jpg"/> 
        </a> 
        <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg"> 
          <img src="img/index-test-img.jpg"/> 
        </a> 
        <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg"> 
          <img src="img/index-test-img.jpg"/> 
        </a> 
        <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg"> 
          <img src="img/index-test-img.jpg"/> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--Fin Projet Deux--> 

/*SLICK SLIDE*/ 
<script type="text/javascript"> 

     $(document).ready(function() {       
      $('.slick_slide').slick({ 
       infinite: true, 

       speed: 300, 
       slidesToShow: 3, 
       slidesToScroll: 3, 
       responsive: [ 
       { 
        breakpoint: 860, 
        settings: { 
        slidesToShow: 2, 
        slidesToScroll: 2 
        } 
       }, 
       { 
        breakpoint: 540, 
        settings:{ 
        slidesToShow: 1, 
        slidesToScroll: 1 
        } 
       } 
       ] 
      });    
     }); 

</script> 
/*FIN SLICK SLIDE*/ 

/*MAGNIFIC POPUP*/ 
<script type="text/javascript">    

     $(document).ready(function() { 
      $('.proj_un').magnificPopup({ 
       gallery: { 
        enabled: true 
       }, 
       removalDelay: 300, 
       mainClass: 'mfp-fade' 
      }); 
      $('.proj_deux').magnificPopup({ 
       gallery: { 
        enabled: true 
       }, 
       removalDelay: 300, 
       mainClass: 'mfp-fade' 
      }); 
     }); 

</script> 
/*FIN MAGNIFIC POPUP*/

這裏的鏈接獸：http://madbook.net/mad/help/index-test.html

我真的不是這方面的專家，所以我希望你不要尖叫和哭泣看到這一切...

這將是偉大的，如果你能帶領我的好方法，因爲我看不到問題來自哪裏......

感謝

瘋狂

來源

2015-04-14 Katapult