0

www.dirtycookie.coで見ることができる私のウェブサイトの私のinstagramフィードから私の写真にprettyPhotoを追加しようとしています

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" を適切に配置していることがわかります。

誰にも提案はありますか？

ありがとう、クリス

4

1 に答える 1

2

コンテンツが AJAX 呼び出しから取り込まれる前であっても、'domready' でアンカーに prettyPhoto() 関数をアタッチしています。したがって、機能していません。これを試して。

$(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 に答える