2

I'm trying to use the Slick.js carousel in responsive display with the Magnific Popup Lightbox.

It's working when the slick slider is in its basic form, but when the window is tight enough to trigger the breakpoint and that the "slides to show" are fewer, the Magnific Popup doesn't work anymore, just opening the linked picture in a new thumbnail and I have to reload the page to make it work again...

Here is my code :

<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*/

Here's the link to the beast : http://madbook.net/mad/help/index-test.html

I'm really not an expert in this, so I hope you won't scream and cry seeing all this...

It would be great if you could lead me on the good way, because I can't see where the problem comes from...

Thanks

Mad

Katapult
  • 21
  • 2

1 Answers1

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...

Katapult
  • 21
  • 2