带有漂亮照片的 Instagram API答案

【问题标题】：Instagram API with prettyPhoto带有漂亮照片的 Instagram API
【发布时间】：2013-02-12 03:00:18
【问题描述】：

我正在尝试将 prettyPhoto 添加到我网站上我的 Instagram 供稿中的图片中，可以在 www.dirtycookie.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/ 文件夹中。

这是我的初始化脚本和正文的底部：

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

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

大家有什么建议吗？

谢谢，克里斯

【问题讨论】：

标签： javascript ajax json api instagram

【解决方案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();

        }
    });
});

【讨论】：