通过Ajax加载图片时的jQuery Lightbox插件 [英] jquery lightbox plugin while images are loaded via ajax

问题描述

我有一个页面，页面加载时最初会在其中加载一堆图像.这些图片与 lightbox插件绑定，当我单击图片时.确实做了应该做的事.但是，我通过jquery添加了一些ajax(通过下拉框触发)，该ajax根据从服务器获取的图像来更新图像列表.重新加载图像列表后，lightbox插件似乎不再起作用.

I have a page where I am loading bunch of images initially when the page loads. These images are tied to the lightbox plugin and when i click on the images..the plugin does do what it is supposed to. However, I have some ajax added via jquery (triggered by a drop down box) which updates the list of images based on what it gets from the server. After the list of images is reloaded the lightbox plugin does not seem to work anymore.

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

Does anyone know if something special needs to be done?

以下是我的html页面中的代码(此方法有效):

Following is the code in my html page (this works):

<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 (现在我希望有人提到像twitter一样的功能:)

and following is the jquery ajax functionality. Thanks to seth (now i wish SO had mention functionality like 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>');
        })
          }
        })
      })
    })

推荐答案

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

Most jQuery lightbox plugins scan the page and insert their functionality at the page load event (or rather, the jQuery document ready event). This functionality modifies the DOM to allow the cool lightbox effect to appear. However, these changes are overwritten by your AJAX call.

我的建议是进入灯箱源，找到在DOM上执行工作的函数，并在ajax请求成功返回后调用它.

My suggestion would be to dive into the lightbox source and find the function that performs the work on your DOM, and call it after your ajax request comes back successfully.

这篇关于通过Ajax加载图片时的jQuery Lightbox插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！