CODEWITHSUNDEEP
javascriptjqueryhtmlcsslightgallery
Phoenix
Phoenix

Reputation: 487

lightgallery does not work with dynamically generated elements

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..

Upvotes: 3

Views: 5440

Answers (2)

Alireza Salehi
Alireza Salehi

Reputation: 43

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,
});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206478

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

    });
});

Upvotes: 1

Related Questions