Implement lightGallery not working?

conmen80 commented 8 years ago

I try implement lightGallery into lightSlider, but it doesn't expand when click on the image, what is the issue?

`<link rel="stylesheet" href="lightslider.css"/>
 <link rel="stylesheet" href="lightgallery.css"/>
 <script src=jquery.min.js"></script>
 <script src="lightslider.js"></script> 
 <script src="lightgallery.min.js"></script> 
 <script>
 $(document).ready(function() {
      $('#image-gallery').lightSlider({
    gallery:true,
    item:1,
    loop:true,
    thumbItem:9,
    slideMargin:0,
    enableDrag: false,
    currentPagerPosition:'left',
    onSliderLoad: function(el) {
        el.lightGallery({
           selector: '#imageGallery .lslide'
        });
    }
      });
 });
 </script>

 <div class="item">            
     <div class="clearfix" style="max-width:474px;">
         <ul id="image-gallery" class="gallery list-unstyled">
             <li data-thumb="img/thumb/cS-1.jpg" class="lslide"> 
                 <img src="img/cS-1.jpg" />
             </li>
             <li data-thumb="img/thumb/cS-2.jpg" class="lslide"> 
                 <img src="img/cS-2.jpg" />
             </li>
             <li data-thumb="img/thumb/cS-3.jpg" class="lslide"> 
                 <img src="img/cS-3.jpg" />
             </li>
             <li data-thumb="img/thumb/cS-4.jpg" class="lslide"> 
                 <img src="img/cS-4.jpg" />
             </li>
         </ul>
     </div>
 </div>`

RonaldPK commented 8 years ago

You have selector: '#imageGallery .lslide' , but your list's ID is image-gallery. Also, you don't need to add class="lslide"; the lightSlider will do that. So this is not an issue.