2

我正在尝试通过 Magnific Popup Lightbox 在响应式显示中使用 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

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

如果您能带领我走上正轨，那就太好了，因为我看不出问题出在哪里...

谢谢

疯狂的

4

1 回答 1

0

First, I forgot, but here is the js for Slick : https://github.com/kenwheeler/slick/blob/master/slick/slick.js

Actually, I found that domNode where destroyed every time a breakpoint was passed.

I simply removed calls of the refresh function (containing the destroy one) in the checkResponsive function and it's working...

I don't know if it could create other problems though...

于 2015-04-15T15:46:42.857 回答