Question

我有一个页面，我在页面加载时最初加载一堆图像。这些图像与lightbox plugin绑定，当我点击图像时...插件确实按照预期执行。但是，我通过jquery添加了一些ajax（由下拉框触发），它根据从服务器获取的内容更新图像列表。重新加载图像列表后，灯箱插件似乎不再起作用了。

有人知道是否需要做一些特别的事情吗？

以下是我的html页面中的代码（可行）：

<div id="gallery">
    <ul id="imagesall">    
       <li>    
         <a title="" href="/catalogFiles/cfil837.jpg">    
          <img height="72" width="72" alt="" src="/catalogFiles/cfil838.jpg"/>    
         </a>    
        </li>
        <li>
         <a title="" href="photos/image2.jpg">
          <img height="72" width="72" alt="" src="/catalogFiles/cfil840.jpg"/>
         </a>
         </li>    
    </ul>
</div>

以下是jquery ajax功能。感谢seth（现在我希望SO提到像twitter这样的功能:)。

jQuery(function(){
  jQuery("select#rooms").change(function(){
    var options = '';
    jQuery.getJSON("/admin/selection.php",{id: jQuery(this).val(), ajax: isAjax},
function(j){
      for (var i = 0; i < j.length; i++) {
 var ul = jQuery('ul#imagesall').empty();
 var images = j[i].images.split(',');
        jQuery.each( images , function(idx, img ) {
ul.append('<li><a title="test" href="/catalogFiles/'+img+'.jpg"><img alt="" src="/catalogFiles/' + img + '.jpg" height="72" width="72"/></a></li>');
        })
          }
        })
      })
    })

Answer 1

大多数jQuery灯箱插件扫描页面并在页面加载事件（或更确切地说，jQuery文档就绪事件）中插入其功能。此功能修改DOM以允许出现酷灯箱效果。但是，这些更改会被您的AJAX调用覆盖。

我的建议是深入了解lightbox源代码并找到执行DOM工作的函数，并在ajax请求成功返回后调用它。

jquery lightbox插件，同时通过ajax加载图像

1 个答案: