带有 JqueryMobile 的 LightGallery答案

【问题标题】：LightGallery with JqueryMobile带有 JqueryMobile 的 LightGallery
【发布时间】：2016-07-22 17:52:02
【问题描述】：

我对 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>

JavaScript：

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

【问题讨论】：

标签： html jquery-mobile lightgallery lightgallery-2

【解决方案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'
});

【讨论】：