Question

我在angular: { exports: "angular" }中使用lightslider lighGallery。我的代码片段中有两组代码。 jsfiddle

代码1：页面加载lightGallery视图。我正在直接从HTML渲染图像 代码2：按钮 - ButtonClick_LightGallery - 点击lightGallery视图。通过 prepend 渲染图片。

我的问题：LightGallery在Code 1中工作正常但Code 2却没有工作

onSliderLoad

$(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;
}

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>

lightSlider中的lightGallery - 用于'onSliderLoad'的Slider.prepend（）不起作用

1 个答案: