使用JqueryMobile的LightGallery

Question

我的LightGallery插件有一個小問題（lightGallery - Git）。我使用jQueryMobile。

我的畫廊位於特定頁面上。當我到達此頁面時，它將請求遠程服務器獲取一些照片。

然後我初始化LightGallery。第一次沒問題。

但當我離開畫廊頁面並返回（有一個新的服務器請求）後，lightGallery未運行。

沒有錯誤的瀏覽器，我有我的照片顯示，但我不能點擊它來像我第一次做的那樣運行LightGallery。

我的代碼：

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

你可能會使用錯誤的HTML標記。您可以查看以下代碼以供參考。這是示例代碼。

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