jquery - 小图像缩略图不起作用

Question

我正在 div 中创建一堆 anchor 和图像，并使用以下代码加载它们:

$('#gallery img').each(function(i) {
    var imgFile = $(this).attr('src');      

}); // end each​​​​​

但是代码不起作用，我看不到图像。我得到一个 404

问题 1:请检查一下出了什么问题 http://jsfiddle.net/u3vFG/

问题 2: 另外，我可以防止对 DIV id=gallery 元素中的图像和 anchor 进行硬编码吗？我可以动态加载这些网址并创建图像和 anchor (例如从 JSON 字符串)吗？

基本上我想要一个空的div

<div id="gallery">
    <!-- load images dynamically here -->
</div>​

并用 JSON 结果填充它

Answer 1

您的第一个问题可能与此问题相关:How to remedy imgur 403 forbidden errors?
实际上，如果您链​​接的网站由于某种原因被禁止(过去违反了 TOS)，imgur 会响应 403 Forbidden。

第二个问题可以通过简单的 jQuery.getJSON() 来解决调用:

var url = "http://example.com/get_gallery_images_json.php";
$.getJSON(url, function(data) {
    $.each(data, function(idx, imgFile) {
        var a = $("<a>").attr("href", imgFile);
        $("<img>").attr("src", imgFile).appendTo(a);
        a.appendTo($("#gallery"));
    }); 
});

这里的url必须返回一个JSON字符串，它是图像url的数组，当你想要填充你的图库时，你必须调用它。示例:

["http://example.com/image1.png", "http://example.com/image2.png"]

上面的JSON实际上是一个数组，而不是一个常规对象。您可以在这里找到有关 JSON 的更多信息:JSON - Wikipedia

编辑:添加了一些示例 anchor /图像附加实现和 JSON 字符串。