LightGallery with JqueryMobile - html

Question

I have a little problem with LightGallery plugin (lightGallery - Git). I use jQueryMobile.
My gallery is on a specific page. When I arrive on this page, it will request a remote server to get some pics.
Then I initialize LightGallery. No problem the first time.
But when I leave the Gallery Page and come back after (there is a new request to server), lightGallery is not running.
No error in the browser, I have my photos displayed but I can't click on it to run LightGallery like I've done the first time.
My Code:
HTML:
<div data-role="page" id="pageGallery" data-theme="a">
<div data-role="content" class="center-body">
<h3 class="nomGroupe"></h3><br/>
<div class="demo-gallery">
<ul id="lightgallery" class="list-unstyled row">
</ul>
</div>
</div>
</div>
Javscript :
$( document ).on( "pagecontainerbeforeshow", function ( event, ui ) {
var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );
if (activePage[0].id == "pageGallery" ) {
$('#lightgallery').empty();
$(".groupName").empty().append("group "+localStorage['groupName']);
envoieRequete('http://myServer/', {'idGroup' : localStorage['idGroup'], 'token' : localStorage['token']}, 'post', function(output){
if(output.group.photos.length === 0) {
$("#lightgallery").append('<br/><p>Empty for Group : ' + localStorage['groupName']+'</p>');
}
else {
for(i=0; i<output.group.photos.length; i++) {
$('#lightgallery').append('<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="http://myServer/'+localStorage['token']+'/'+localStorage['idGroup']+'/' + output.group.photos[i].id
+ '" data-src="http://myServer/'+localStorage['token']+'/'+localStorage['idGroup']+'/' + output.group.photos[i].id + '" data-sub-html="<h4>PhotoAlt</H4>"><a href=""><img class="img-responsive"\n\
src="http://myServer/'+localStorage['token']+'/'+localStorage['idGroup']+'/' + output.group.photos[i].id + '"/></a></li>');
}
}
});
}
});
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'pageGallery':
$(document).on("tap", "#lightgallery li", function (){
$('#lightgallery').lightGallery({});
});
}
});

Answer 1

You might be using wrong html markup. you can check the following code for reference. This is sample code.
HTML
<div class="row">
<div class="large-12 columns">
<ul class="small-block-grid-2 medium-block-grid-3" id="lightgallery">
<li> <a class="item" href="img/alchemy_icon1.jpg"><img src="img/alchemy_icon1_th.jpg"></a>
</li>
<li> <a class="item" href="img/chandra1.jpg"><img src="img/chandra1-th.jpg"></a>
</li>
<li> <a class="item" href="img/Fish.jpg"><img src="img/Fish-th.jpg"></a>
</li>
</ul>
</div>
</div>
Javascript
$("#lightgallery").lightGallery({
selector: '.item'
});