文章/答案/技术大牛

发布

社区首页 >问答首页 >lightGallery in lightSlider - Slider.prepend() for 'onSliderLoad‘不起作用

问lightGallery in lightSlider - Slider.prepend() for 'onSliderLoad‘不起作用
EN

Stack Overflow用户

提问于 2016-08-07 17:16:58

回答 1查看 2.8K关注 0票数 0

我在轻滑块中使用了lighGallery。我的代码片段中有两组代码。小提琴

代码1:页面加载lightGallery视图。我直接从HTML渲染图像

代码2:按钮- ButtonClick_LightGallery -单击lightGallery视图。通过预置渲染图像。

我的问题是: LightGallery在代码1中运行良好，但代码2不起作用。

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

javascript

jquery

html

css

lightgallery

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-08 03:10:43

问题解决了。请参阅

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38816623

复制

相似问题

问lightGallery in lightSlider - Slider.prepend() for 'onSliderLoad‘不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问lightGallery in lightSlider - Slider.prepend() for 'onSliderLoad‘不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问lightGallery in lightSlider - Slider.prepend() for 'onSliderLoad‘不起作用
EN