小圖像縮略圖不工作

我創造了一個div一堆錨和圖像，並使用下面的代碼加載它們：小圖像縮略圖不工作

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

}); // end each

但是代碼不工作，我無法看到圖像。我得到一個404

問題1：能否請你檢查什麼是錯的http://jsfiddle.net/u3vFG/

問題2：另外，我可以防止硬編碼的圖像和主持人在DIV ID =畫廊元素？我可以動態加載這些網址，並創建圖像和錨點，從一個JSON字符串說？

基本上我想要一個空div

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

，並與JSON填充它導致

來源

2012-11-10 user1814374

很奇怪。我也看不到它們，但是當我複製並粘貼圖像網址到一個新的標籤中，然後刷新小提琴我可以看到它們。我必須首先查看每個圖像，然後縮略圖才能正常工作。 – davidethell

是啊我面臨着同樣的問題..它在一個新的小提琴，它的作品 – user1814374

你的第一個問題可能是涉及到這樣一個問題：How to remedy imgur 403 forbidden errors?
其實imgur與403 Forbidden響應，如果該網站你由於某種原因被禁止連接（過去違反TOS）。

第二個問題可以用一個簡單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

編輯：添加了一些示例錨/圖像附加實現和一個JSON字符串。

來源

2012-11-10 11:52:01 aorcsik

你可以告訴我使用硬編碼的JSON字符串..假設它也預先填充了這些url的 – user1814374

，我將如何使用此JSON字符串創建這些錨點和圖像 – user1814374

添加了一些示例實現和一個數組的JSON字符串。 – aorcsik

不知道爲什麼問題1是一個問題。關於瀏覽器緩存的一些事情。看到我上面的評論。關於問題2，您當然可以使用JSON字符串來提供您的數據。我假設你將從網址中提取json數據。我還假設你的JSON結構只是文件名和URL，現在就像{「filename」：「someurl」}。

$.getJSON('http://someurl.com/getmystuff', function(data) { 
    var $gallery = $('#gallery'); 
    $.each(data, function(name, url) { 
     $gallery.append('<a href="' + url + '"><img src="' + url + '" width="70" height="70"/></a>'); 
    }); 
});

來源

2012-11-10 11:54:14 davidethell

你可以告訴我使用硬編碼的JSON字符串嗎？假設它預填充這些網址 – user1814374

我認爲該網站的保護是針對hotlink。這意味着只有網站本身才能訪問圖像。

將圖像鏈接粘貼到新選項卡時，您有權訪問和查看圖像。然後，圖像緩存在瀏覽器中，當您刷新小提琴時，由於圖像在瀏覽器緩存中可用，因此可以顯示它們。

來源

2012-11-10 11:55:47 sdespont

小圖像縮略圖不工作

回答

相關問題