0

我正在尝试将 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" 。

有人有什么建议吗？

谢谢，克里斯

4

1 回答 1

2

您正在将 prettyPhoto() 函数附加到“domready”的锚点上，甚至在从 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();

        }
    });
});
于 2013-02-12T03:57:01.633 回答