ユーザーが左右の矢印を押すと、1 つの画像がスライドアウトし、新しい画像がスライドインする画像スライドギャラリーを作成しました。うまくいきました。
関連するすべての画像と説明は、私の PHP ファイルに含まれていました。今、新しい画像をいくつか用意したいと思っていますが、このコンテンツの追加と変更に必要以上に時間がかかっていることがわかりました。
そこで、すべての画像マークアップを削除して、画像用の JSON ファイルを用意することにしました。
データを取得してDOMに挿入するために使用しているコードは次のとおりです
$.getJSON('data.txt', function(data) {
var len = data.length, i; for (i = 0; i < len; i += 1) {
$("#image_container").append(
'<div class="image_frame"><img class="image" src="' + data[i].image + '" width="620px" alt="' + data[i].alt + '">
<div class="caption"></div><div class="innercaption"><p><span>' + data[i].category +
'</span> |' + data[i].title + '</p></div><div class="caption2"></div><div class="innercaption2">
<p><span>Description</span> | ' + data[i].description + '</p></div></div>' );
};
});
準備完了のドキュメントの開始時に実行されますが、スライド矢印は機能しませんが、エラーは生成されません。
私の推測では、スライダーのコードと同時にコンテンツが作成されるためです。だから、彼らはお互いを見ることができません。
これを修正する方法はありますか (おそらく、スライダー コードが認識できるように getJSON を実行します)。