0

I am working on a jquery mobile site which will have an image gallery populated by JSON/AJAX from instagram. I can get the images loaded just fine, but I want to take it one step further and use photoswipe to render the gallery. The issue that I am running into, is that if I add the call to photoswipe after the ul has been populated from the json feed, the ul has not actually been redrawn, so photoswipe can't find any child elements to use. Below is my script:

HTML

<div data-role="page" id="Photos">
<div data-role="header">
    <a href="javascript:history.go(-1)" data-icon="back" data-direction="reverse">Back</a>      
    <h1>Photos</h1>
</div>
<div data-role="content">   
    <div id="AdBanner">
    </div>
    <ul id="PhotoList">
    </ul>
</div>
</div>

Script

$("#Photos").live("pagebeforeshow", function(){
    $("ul#PhotoList").children().remove('li');
    var tag = MyTag
    $.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&amp;client_id=####",
    function(data){
        $.each(data.data, function(i,item){
            $("ul#PhotoList").append('<li><a href="' + item.images.low_resolution.url + ' rel="external"><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /></a></li>');
        });
    });
    var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
});

Is there a way to refresh the ul prior to calling the photoswipe initiator, or is there another event that I should be using for photoswipe?

4

2 に答える 2

0

これはこの質問に対する「適切な」答えではないと確信していますが、必要な機能を取得するための回避策を見つけました。jquery ul.appendを使用してリスト項目を追加するのではなく、代わりに変数を使用してリスト項目を変数に追加し、UL.innerhtmlを変数に設定しました。

var Photos = "";
$.each(data.data, function(i,item){
    Photos += '<li><a href="' + item.images.low_resolution.url + '"><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="80" /></a></li>';
});
document.getElementById('PhotoList').innerHTML = Photos;

繰り返しますが、これはこれを行うための正しい方法ではないと確信していますが、それは私にとってはうまくいき、より良い解決策がない場合、それは仕事を成し遂げました。

于 2013-02-24T02:17:22.017 に答える
0

ページが読み込まれる前、または読み込まれた後に、 JSON/AJAX 経由で画像を読み込みますか?

ページを読み込む前に、JavaScript で画像を読み込み、それを PhotoSwipe インスタンスにアタッチする例のコードを確認しましたか?

例えば。http://www.photoswipe.com/latest/examples/12-custom-target.html

于 2013-03-13T00:37:12.087 に答える