如何添加jQuery的收藏夹通过AJAX内容添加到网页？ [英] How to add jquery lightbox to content added to page via ajax?

问题描述

我加载一个画廊到使用Instagram的API的页面。阿贾克斯看起来像这样

I am loading a gallery onto a page using the Instagram API. The AJAX looks something like this

$.ajax ({
    type: 'GET',
    dataType: 'jsonp',
    cache: false,
    url: 'https://api.instagram.com/v1/tags/food/media/recent?client_id='+instagramCID,
    success: function(data) {
        for (i in data.data) {
            $('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '" title="Photo via '+ data.data[i].user.username +' on Instagram"  rel="lightbox[gallery]"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>');
        }     
    }
});

中的HTML呈现这样的事情后，AJAX已经加载的内容到页面：

The HTML renders something like this after the AJAX has loaded the content to the page:

<a href="http://distilleryimage1.instagram.com/5184cfc4754211e181bd12313817987b_7.jpg"   
title="Photo via washingtonwoman on Instagram" rel="lightbox[gallery]"><img 
class="instagram-image" 
src="http://distilleryimage1.instagram.com/5184cfc4754211e181bd12313817987b_5.jpg"></a>

我知道我需要将动态内容添加到页面后装入收藏夹，但似乎无法弄清楚如何做到这一点。所有我从计算器尝试其他建议创造了疯狂的递归已崩溃我的浏览器。

I know I need to load lightbox after the dynamic content is added to the page, but can't seem to figure out how to do that. All the other advice I've tried from stackoverflow has created crazy recursiveness that has crashed my browser.

使用这个jQuery灯箱插件： http://leandrovieira.com/projects/jquery/lightbox/

Using this jquery lightbox plugin: http://leandrovieira.com/projects/jquery/lightbox/

推荐答案

请问像这样的工作？

$.ajax ({
    type: 'GET',
    dataType: 'jsonp',
    cache: false,
    url: 'https://api.instagram.com/v1/tags/food/media/recent?client_id='+instagramCID,
    success: function(data) {
        for (i in data.data) {
            $('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '" title="Photo via '+ data.data[i].user.username +' on Instagram"  rel="lightbox[gallery]"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>');
        }     

        //Re-initialise lightboxes
        $('.instagram').lightBox();
    }
});

您需要将相同的配置传递到收藏夹（）函数，您使用初始设置的页面加载时的收藏夹。

You will need to pass the same configuration to the lightBox() function as you used to initially set up the lightbox when the page loaded.

基本上，这里究竟是怎么回事是，我们正在迫使收藏夹，重新初始化Ajax内容加载之后。

Basically, what is going on here is that we're forcing the lightbox to re-initialise after the ajax content has loaded.

以上的应的是最简单的解决方案提供的code，我都看见了。

The above should be the simplest solution given the code that I have seen.

如果你想身边多一点使用Ajax事件玩，你可以尝试在一个 AJAX事件绑定代替，但是这是一个有点这个问题的范围之外。

If you want to play around a bit more with ajax events, you may want to try binding on an ajax event instead, but that's a little outside the scope of this question.

这篇关于如何添加jQuery的收藏夹通过AJAX内容添加到网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！