javascript - lightSlider 中的 lightGallery - 'onSliderLoad' 的 Slider.prepend() 不工作

Question

我有lightslider使用 lighGallery在 onSliderLoad 中。我的代码片段中有两组代码。 jsfiddle

代码 1: 页面加载 lightGallery View 。我直接从 HTML 渲染图像
代码 2: 按钮 - ButtonClick_LightGallery - 单击 lightGallery View 。通过prepend渲染图像。

My Issue: LightGallery is working fine in Code 1 but Code 2 is not working.

$(document).ready(function() {
  $('.demo').hide();
function BuildImageSlider() { 
  $('.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>

Answer 1

问题已解决。请引用

$(document).ready(function() {
  $('.demo').hide();
function BuildImageSlider() { 
      $('#lightSlider').empty();
    $(".lSPager").remove();
    $(".lSAction").empty();
  $('.demo').show();
  var sld=$('#lightSlider');
    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" />';
            
         sld.prepend(newEl);
         //sld.refresh();
  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'
                    });
                }   
            });  
            
          
           } 
  
  
 
      
  $( "#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">
  
</ul>
</div>