Instagram API with prettyPhoto

Question

我正试图从我的网站上的instagram订阅源将prettyPhoto添加到我的照片中，该订阅源可以在www.dirtybookie.co 上看到

我可以成功地从instagram API中提取图片，但是，我无法将prettyPhoto功能添加到提要中的图片中。这是我用prettyPhoto钩子进行的ajax调用：

<script>
$(function() {
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/users/<?=$user_id?>/media/recent/?access_token=13137.f59def8.1a759775695548999504c219ce7b2ecf",
        success: function(data) {
            for (var i = 0; i < <?=$num_to_display?>; i++) {
           jQuery('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '"  rel="prettyPhoto"><img alt="'+ data.data[i].caption.text +'" class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>');  
            }     
        }
    });
});
</script>

它的行为几乎就像没有调用jquery.prettyPhoto.js一样，我已经确认它在/js/文件夹中。

这是我的init脚本和正文的底部：

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

使用Firebug，我可以看到Ajax正在正确地放入rel="prettyPhoto"。

有人有什么建议吗？

谢谢，Chris

Answer 1

您在'domready'的锚点上附加了prettyPhoto（）函数，甚至在从AJAX调用中提取内容之前。因此它不起作用。试试这个。

$(function() {
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/users/<?=$user_id?>/media/recent/?access_token=13137.f59def8.1a759775695548999504c219ce7b2ecf",
        success: function(data) {
            for (var i = 0; i < <?=$num_to_display?>; i++) {
           jQuery('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '"  rel="prettyPhoto"><img alt="'+ data.data[i].caption.text +'" class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>');  
            }     
$("a[rel^='prettyPhoto']").prettyPhoto();
        }
    });
});