动态生成的lightslder和lightgallery答案

【问题标题】：Dynamically generated lightslder and lightgallery动态生成的lightslder和lightgallery
【发布时间】：2018-09-25 21:47:55
【问题描述】：

我有一个新闻提要页面，其中不同的帖子以灯光滑块和灯光画廊的组合显示他们的图像。到目前为止，我已经使它适用于硬编码的帖子，但未能对那些动态生成。

这是我用于组合 lightgallery 和 lightslider 的代码

$('.lightSlider').each(function (index) {
    $(this).lightSlider({
        gallery: true,
        item: 1,
        loop: true,
        slideMargin: 0,
        thumbItem: 9,
        onBeforeSlide: function (el) {
            $('#counter' + index).text(el.getCurrentSlideCount());
        },
        onSliderLoad: function(el) {
            el.lightGallery({
                selector: '.lightgallery .lslide'
            });
        }
    });
  });

这是我正在使用的代码，用于在动态生成的帖子中组合 lightslider 和 lightgallery

HTML：

<button type="button" id="appendnewcontainer">Click me To create new slider</button>
<div id="fotoappendarea">

JavaScript：

    $(document).ready(function(){

            var imagesarray = [
                "http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg",
                "http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg",
                "http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg",
                "http://i765.photobucket.com/albums/xx291/just-meller/national%20geografic/Birds-national-geographic-6873734-1600-1200.jpg",
                "http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg"
            ];

            var hiddenimages = "",
                    albumcover;

            $("#appendnewcontainer").click(function() {

                $("<span />", {
                    class : "container",
                    appendTo : $("#fotoappendarea"),
                    append : $("<span />", {
                        class : "imagecontiner",
                        html : "<a class='dfed' href=" + imagesarray[1] + "><img src='" + imagesarray[1] + "' class='_34'/></a>"
                    }).lightGallery()
                });

            });
        });

【问题讨论】：

标签： javascript jquery lightgallery lightgallery-1

【解决方案1】：

解决了！这是我的做法

HTML：

<button type="button" class="btn btn-danger" id="appendnewcontainer">Click me To create new slider</button>
<div id="fotoappendarea">

JavaScript：

$(document).ready(function(){
        getPost(0);

        var imagesarray = [
            "https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg",
            "https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?auto=compress&cs=tinysrgb&h=350"
        ];

        var hiddenimages = "",
                albumcover;

        $("#appendnewcontainer").click(function() {
            $("#fotoappendarea").append("<div class='lightgallery my-5'><ul class= 'lightSlider'><li data-thumb=" + imagesarray[0] + " data-src=" + imagesarray[0] + "><img src='" + imagesarray[0] + "' class='_34'/></li><li data-thumb=" + imagesarray[1] + " data-src=" + imagesarray[1] + "><img src='" + imagesarray[1] + "' class='_34'/></li></ul></div>");
            $('.lightSlider:last').lightSlider({
                    gallery: true,
                    item: 1,
                    loop: true,
                    slideMargin: 0,
                    thumbItem: 9,
                    onBeforeSlide: function (el) {
                        $('#counter' + index).text(el.getCurrentSlideCount());
                    },
                    onSliderLoad: function(el) {
                        el.lightGallery({
                            selector: '.lightgallery .lslide'
                        });
                    }
                });
            });

    })

稍后会添加jsfiddle

【讨论】：