Question

我正在使用api从flickr动态加载图像。但是，当我尝试使用colorbox，prettyphoto或其他jquery模式窗口时 - 它们不起作用。指向较大图像的链接仅在新窗口中打开图像。

我的测试页： http://www.thinquetanque.com/test/full/test.html#/advanced-usage

我认为这是因为在图像完成拉动之前加载了模态插件。

关于如何抵消的想法？

谢谢！

更新

尝试使用：

$('.colorbox').live('click', function() { $.fn.colorbox({href:$(this).attr('href'), open:true}); return false; }

这没用 - 但我尝试在我的flickr api中使用 - 使用.live，如下所示。我使用的flickr api使用.live为div的子节点添加属性。

 $('#wrapper').live('mouseover', function(){
                   $(this).children('p').attr('class', 'image-info');
                });

但我无法弄清楚如何更改上面的内容以使用colorbox。我将鼠标悬停更改为单击，但我不知道如何使用$（this）添加colorbox函数.children

Answer 1

我遇到了同样的问题，终于搞清楚了！在获取src之前添加一个加载处理程序应该只需调用colorbox函数即可。使用您的代码，它看起来像这样：

 ...
 $.getJSON('YOUR_JSON_URL_INFO', 
 function(data){

    $('#wrapper a').colorbox();

        //if the image has tags
        if(data.photo.tags.tag != '') { ...

Answer 2

你是对的。绑定插件后加载图像。在jQuery中，您有live()事件，它与bind()事件类似，但它也适用于动态加载的dom元素。

Answer 3

为每个图像添加一个加载处理程序。在处理程序中，将颜色框添加到每个图像加载时。为了完成这项工作，你需要在设置src之前添加处理程序并将其添加到DOM中，否则你会遇到在处理程序之前加载图像并因此没有发生事件的问题。您还可以将锚标记为添加了颜色框，并使用具有适当长超时的计时器来“赶上”在应用处理程序之前加载的任何图像，如果无法保证处理程序在图像之前处于活动状态开始加载。

jquery模态插件不能处理动态加载的图像

3 个答案: