0

我正在开发一个 jquery 移动网站，该网站将拥有一个由 instagram 中的 JSON/AJAX 填充的图片库。我可以很好地加载图像，但我想更进一步并使用 photoswipe 来渲染画廊。我遇到的问题是，如果我在ul从 json 提要填充之后添加对 photoswipe 的调用，ul实际上并没有重绘，所以 photoswipe 找不到任何要使用的子元素。下面是我的脚本：

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>

脚本

$("#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();
});

有没有办法ul在调用 photoswipe 发起者之前刷新，或者我应该使用另一个事件来进行 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 回答