2015-12-15 6 views
2

у меня есть реализовать lighgallery плагин для моего локального сайта ... и это не работает с DOM элементами ...lightgallery не работает с динамически создаваемых элементов

, например

1.) добавить элемент DOM создан с JS в HTML код ..

если я создать что-то подобное в JS "<span id='imgcon'><a href="image"><img src="image"></a></span>" и это весь код в varialbe позволяет galleryview вызова (var galleryview) и эти переменный я добавляемый к DIV, который находится в файле HTML <html><head></head><bdy><div class="container"></div></bdy></html> и добавьте это как из кода файла js $(".container").append(galleryview); и в конец я использовать этот $(".imgcon").lightGallery(); не работает ...

Здесь jsfiddle demo не работает с йотом

2.) изображения в HTML коде

У меня есть HTML-код smthing как этот <html><head></head><bdy><div class="container"><span class="imgcont"><a href="image"><img src="image"></a></span></bdy></html> Это прекрасно работает как это. $(".imgcon").lightGallery();

Адрес jsfiddle working demo without dom.

Вопрос: почему я не могу использовать dom с lightgallery?

Первое демо не работает я использую еще потому Js РОМ и второй демо работает, потому что я использовать HTML-код в HTML файл .. или есть какие-либо проблемы с моим кодом ..

+0

да я писал быстро, так что я написал abbravtion – Phoenix

+0

, что это ? что значит ? – Phoenix

+0

ОК, кстати, у меня есть понимание qeustion, или я должен объяснить ?? – Phoenix

ответ

1

Проще говоря ваш $(".imagecontiner").lightGallery();внутри в click обработчик

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

выше будет работать только для первого динамически созданного gellery.
Чтобы заставить его работать на нескольких элементов: предварительно создать в памяти appendable элементов и присвоить каждому в .lightGallery() экземпляр

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

    }); 
}); 
+0

whyyyy я должен использовать в ?? – Phoenix

+0

@Phoenix выше будет работать только на первом добавлении, поскольку несколько приложений ждут секунды, чтобы улучшить мой ответ: D –

+0

@Phoenix отредактировал мой ответ для нескольких элементов –

Смежные вопросы