お尋ね「します。下記はAJAXのHTMLです。画像のフォルダがあり、違う画像をいれても、WEB上でAPI上の画像がそのまも反映されますが、自分の画像が出力できるようにできないでしょうか?
(Webserver上には写真はUPしています)
//****************************************************************
//A.Ajax通信 開始(ver1.8...)
//****************************************************************
var request = $.ajax({
type: 'GET', //GET、POST
url: "ajax_data.json",
cache:false, //初期値はtrueでキャッシュする状態
dataType: 'jsonp', //text, html, xml, json, jsonp, script
jsonpCallback: 'jsonp_data',
timeout: 3000
});
//****************************************************************
//B.Ajax成功後処理
//****************************************************************
request.done(function(data) {
console.log("----done.通信処理OK----");
//パース処理
var len = data.length; //データの個数を取得
for(var i=0; i<len; i++){ //データの個数分、繰り返し処理
$("#thumbs").append('<img src="img/'+data[i].src+'" alt="'+data[i].alt+'">'); //個数分IMGタグをHTML内に追加
}
});
//****************************************************************
//C.Ajaxエラー処理
//****************************************************************
request.fail(function() {
console.log("----fail.通信処理NG----");
});
//****************************************************************
//D.Ajax通信完了後処理
//****************************************************************
request.always(function() {
console.log("----always.通信処理完了----");
//最初の1回だけ動作するクリックイベント
$("#thumbs img").one("click",function(){
$("#links").show(1000);
});
//サムネイルクリック:画像切り替え処理
$("#thumbs img").on("click",function(){
var img_src = $(this).attr("src");
var img_alt = $(this).attr("alt");
$("#lage_img").attr("src",img_src).attr("alt",img_alt);
$("#select_img").html(img_src + img_alt);
});
});
//この中に処理を記述 終了
});
</script>
</section> </main> <footer>フッター[現在選択している画像は:<span id="select_img"></span>]</footer> </body> </html><!-- IMGが挿入される場所 --> <div id="thumbs"></div> <!--/ IMGが挿入される場所 -->
回答1件
あなたの回答
tips
プレビュー