lightgallery无法正常工作

Question

I am using localhost xampp for practise.. I have implemented a lightgallery to show images from my images folder with js but lightgallery does not show me that images as gallaery..

here i snippet my code ....

$(element).lightgallery();

is not working... where element is class of span tag and this class and span is created by js ( var container ="<span> <bla> <bl>image<bl/> </bla></span>"; $("#this_div_id_in_html_page_or_this_div_of_html_page").append(container); )

 $(document).ready(function() { var imagesarray= []; imagesarray[0] = "http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg"; imagesarray[1] = "http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"; imagesarray[2] = "http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg"; imagesarray[3] = "http://i765.photobucket.com/albums/xx291/just-meller/national%20geografic/Birds-national-geographic-6873734-1600-1200.jpg"; imagesarray[4] = "http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg"; var hiddenimages = "",albumcover; $("#appendnewcontainer").click(function (){ /*for (var i = 0; i < imagesarray.length; i++) { imagepath = imagesarray[i]; hiddenimages += "<a class='hidimage' href=" + imagepath + "><img src=" + imagepath + "/></a>" }*/ var glryPostContainer = "<span class='container'>" + "<span class='imagecontiner'>" + "<a class='dfed' href=" + imagesarray[1] + ">" + "<img src='" + imagesarray[1] + "' class='_34'/>" + "</a>" + "</span>" + "</span>"; $("#fotoappendarea").append(glryPostContainer); }); $(".imagecontiner").lightGallery(); }); 

 #fotoappendarea { box-sizing: border-box; display: inline-block; width: 550px; min-height: 100px; max-height: 450px; margin: 10px 0px; padding: 5px; background-color: #fff; border-radius: 7px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.8/css/lightgallery.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.8/js/lightgallery-all.min.js"></script> <div id="appendnewcontainer"> Click me To make new album</div> <div id="fotoappendarea"></div> 

Answer 1

I dont see any issue , even your demo is working . But as you wrote in snippet it has be

$(".imagecontiner").lightGallery();

& not

$(".imagecontiner").lightgallery();

Note the camelcase

WORKING COPY

Answer 2

working example..

 $(document).ready(function() { var imagesarray = []; imagesarray[0] = "http://lorempixel.com/500/500"; imagesarray[1] = "http://lorempixel.com/500/450"; imagesarray[2] = "http://lorempixel.com/200/600"; imagesarray[3] = "http://lorempixel.com/500/200"; imagesarray[4] = "http://lorempixel.com/300/300"; var hiddenimages = ""; $("#appendnewcontainer").click(function() { for (var i = 0; i < imagesarray.length; i++) { hiddenimages += "<a class='hidimage dfed' href=" + imagesarray[i] + "><img class='_34' src=" + imagesarray[i] + "></a>" } console.log(hiddenimages); var glryPostContainer = "<span class='container'>" + "<span class='imagecontiner'>" + "<a class='dfed' href=" + imagesarray[0] + ">" + "<img src='" + imagesarray[0] + "' class='_34'>" + "</a>" + hiddenimages + "</span>" + "</span>"; $("#fotoappendarea").append(glryPostContainer); }); $(".imagecontiner").lightGallery(); }); 

 #fotoappendarea { box-sizing: border-box; display: inline-block; width: 550px; min-height: 100px; max-height: 450px; margin: 10px 0px; padding: 5px; background-color: #fff; border-radius: 7px; } .hidimage { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.8/css/lightgallery.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.8/js/lightgallery-all.min.js"></script> <div id="appendnewcontainer">Click me To make new album</div> <div id="fotoappendarea"></div>