I implemented lightslider with lightGallery in the onSliderLoad function. There are two sets of code snippets included in my HTML code. You can find the complete code on this jsfiddle link.
Code 1: Displays lightGallery view on page load, rendering images directly from HTML.
Code 2: Shows a button that, when clicked, should display the lightGallery view. It uses 'prepend' to add images dynamically.
Issue: The lightGallery works fine in Code 1 but is not working in Code 2.
$(document).ready(function() {
$('.demo').hide();
function BuildImageSlider() {
// Function to create and show lightSlider
$('.demo').show();
var slider = $('#lightSlider').lightSlider({
gallery:false,
item:1,
loop:true,
thumbItem:9,
slideMargin:0,
enableDrag: false,
currentPagerPosition:'left',
onSliderLoad: function(el) {
el.lightGallery({
selector: '#lightSlider .lslide'
});
}
});
var newEl = '<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" /> </li><li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />';
slider.prepend(newEl);
slider.refresh();
}
$('#lightSlider-pageload').lightSlider({
gallery:true,
item:1,
loop:true,
thumbItem:9,
slideMargin:0,
enableDrag: false,
currentPagerPosition:'left',
onSliderLoad: function(el) {
el.lightGallery({
selector: '#lightSlider-pageload .lslide'
});
}
});
$( "#refresh" ).click(function() { BuildImageSlider(); });
});.lSAction > a {
z-index: 99 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js"></script>
<link href="http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet"/>
<input type="button" id="refresh" value="ButtonClick_LightGallery"/>
<div class="demo">
<ul id="lightSlider">
</ul>
</div>
<div class="demo-pageload">
<ul id="lightSlider-pageload">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" /><li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" /></li><li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg"> <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" /> </li>
</ul>
</div>