lightgallery does not work with dynamically generated elements

Question

I have implement lighgallery plugin to my local site... and this is not working with dom elements ...

for example

1.) append dom element created with js to html code..

if i create something like this in js "<span id='imgcon'><a href="image"><img src="image"></a></span>" and this all code is in a varialbe lets call galleryview (var galleryview) and this variable i append to a div that is in html file <html><head></head><bdy><div class="container"></div></bdy></html> and append like this from js file code $(".container").append(galleryview); and in end i use this $(".imgcon").lightGallery(); does not work...

Here is jsfiddle demo not working with dom

2.) images are in html code

i have html code smthing like this <html><head></head><bdy><div class="container"><span class="imgcont"><a href="image"><img src="image"></a></span></bdy></html> This works fine as it.$(".imgcon").lightGallery();

Here is jsfiddle working demo without dom.

Question : why i cannot use dom with lightgallery ?

First demo is not working becasue i use js dom and second demo is working because i use html code in html file.. or there any problem with my code..

You're always appending the `[1]`th image from Array... so I don't understand what's your issue. — Roko C. Buljan, Dec 15 '15 at 20:41
it doesnot matter from array... i want to know why first code is not working with lightgallery ? — Phoenix, Dec 15 '15 at 20:43

Roko C. Buljan · Accepted Answer · 2015-12-15T21:25:24.063

1

Simply put your $(".imagecontiner").lightGallery(); inside the click handler

http://jsfiddle.net/o0y70kv0/1/

The above will work only for the first dynamically created gellery.
To make it work for multiple elements: pre-create in-memory appendable elements and assign to each the .lightGallery() instance

http://jsfiddle.net/o0y70kv0/6/

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

    });
});

edited Dec 15 '15 at 21:25

answered Dec 15 '15 at 20:49

Roko C. Buljan

196,159
39
305
313

whyyyy i should use in ?? – Phoenix Dec 15 '15 at 20:53
@Phoenix the above will work only on the first append, for multiple appends wait a second to improve my answer :D – Roko C. Buljan Dec 15 '15 at 20:54
ok this works for me but http://jsfiddle.net/o0y70kv0/1/ this works too for every append item http://jsfiddle.net/o0y70kv0/5/ – Phoenix Dec 15 '15 at 21:05
@Phoenix if you append more than one, the 2nd, 3rd etc are not clickable AKA: will not trigget the gallery. Use my extended answer example for multiple dynamic galleries. – Roko C. Buljan Dec 15 '15 at 21:08
@Phoenix ohh well than :D – Roko C. Buljan Dec 15 '15 at 21:10
@Phoenix no, believe me. you have CSS issues. Using the first code, all other "containers" will not trigger the gallery see for your self: http://jsfiddle.net/o0y70kv0/7/. Again, use my extended example. – Roko C. Buljan Dec 15 '15 at 21:18

score 0 · Answer 2 · answered May 01 '20 at 09:09

when you generated gallery item after than you need to use below code in your project

    var $methods = $('#gallery-container');

$methods.lightGallery();
$methods.data('lightGallery').destroy(true);
$methods.lightGallery({
    thumbnail: true,
    animateThumb: true,
    showThumbByDefault: true,
});

lightgallery does not work with dynamically generated elements

2 Answers2