3

div に一連のアンカーと画像を作成し、次のコードを使用してそれらをロードしています。

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

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

ただし、コードが機能しておらず、画像が表示されません。私は404を取得します

問題 1:何が問題なのか確認してくださいhttp://jsfiddle.net/u3vFG/

問題 2:また、DIV id=gallery 要素で画像とアンカーをハードコーディングしないようにすることはできますか? これらの URL を動的にロードして、たとえば JSON 文字列から画像とアンカーを作成できますか?

基本的に空のdivが欲しい

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

JSONの結果を入力します

4

3 に答える 3

1

あなたの最初の問題は、おそらく次の質問に関連しています: imgur 403 の禁止されたエラーを修正するにはどうすればよいですか? 実際、リンク元のサイトが何らかの理由で禁止されている場合 (過去に TOS に違反した場合)、
imgur は応答します。403 Forbidden

2 番目の問題は、単純な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では、画像の URL の配列である JSON 文字列を返す必要があります。ギャラリーにデータを入力する場合は、これを呼び出す必要があります。例：

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

上記の JSON は実際には配列であり、通常のオブジェクトではありません。JSON の詳細については、JSON - Wikipediaを参照してください。

編集:アンカー/画像追加の実装例と JSON 文字列を追加しました。

于 2012-11-10T11:52:01.770 に答える
0

問題 1 が問題である理由がわかりません。ブラウザのキャッシュについて。上記の私のコメントを参照してください。問題 2 に関しては、確かに JSON 文字列を使用してデータを提供できます。URLからjsonデータを取得すると仮定します。また、JSON 構造は {"filename":"someurl"} のようにファイル名と URL だけであると仮定します。

$.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-10T11:54:14.627 に答える
0

Web サイトはホットリンクから保護されていると思います。これは、Web サイト自体のみが画像にアクセスできることを意味します。

画像のリンクを新しいタブに貼り付けると、画像にアクセスして表示する権利が与えられます。次に、画像がブラウザにキャッシュされ、フィドルを更新すると、ブラウザのキャッシュで画像が利用可能になるため、それらを表示できます。

于 2012-11-10T11:55:47.120 に答える