0
お手伝いができたら幸いです！ :)jQuery画像カルーセルの設定は動的生成コンテンツ（Flickr API）には適用されません
私はスタティックコードの代わりに動的に読み込まれたコンテンツで画像カルーセル（Owl Carousel）を作成しようとしています。この動的コンテンツは、jQueryとFlickr APIを使用して生成されます。
下記のスクリプトは、特定のFlickrアルバムから画像を取得し、HTML要素（画像+リンク）に変換します。 $ .each（data.photoset.photo、機能を使用して（I、アイテム）{私は与えられた要件に従って、カルーセルのコンテンツを作成してい機能。
問題があるから、その何とかjQueryの設定ブラウザでinspect要素を使用すると、コンテンツが正しく生成され、カルーセルの設定の一部が生成されたコンテンツに適用されますが、フロントエンドには表示されないことがわかります：view screenshot
注：ダイナミックコンテンツを静的コンテンツに変換してカルーセルの内部に挿入すると、別のスクリプトを使用して動的に作成されたコンテンツにjQueryプラグインを適用する問題の原因となっています。 <body>（スクリプトに必要なAPIキー）から切り取ら
コード：
<body>
<div class="owl-carousel">
</div>
<script type="text/javascript">
function getFlickrImages(setId) {
var URL = "https://api.flickr.com/services/rest/" + // Wake up the Flickr API gods.
"?method=flickr.photosets.getPhotos" + // Get photo from a photoset. https://www.flickr.com/services/api/flickr.photosets.getPhotos.htm
"&api_key=<YOUR-API-KEY>" + // API key. Get one here: http://www.flickr.com/services/apps/create/apply/
"&photoset_id=72157663149819061" + // The set ID.
"&[email protected]" +
"&privacy_filter=1" + // 1 signifies all public photos.
"&per_page=10" + // For the sake of this example I am limiting it to 20 photos.
"&format=json&nojsoncallback=1"; // Er, nothing much to explain here.
// See the API in action here: https://www.flickr.com/services/api/explore/flickr.photosets.getPhotos
$.getJSON(URL, function(data){
var owner = data.photoset.owner;
var phot_set_id = data.photoset.id;
$.each(data.photoset.photo, function(i, item){
// Creating the image URL. Info: https://www.flickr.com/services/api/misc.urls.html
var img_src = "https://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg";
//var img_thumb = $("<img/>").attr("src", img_src).attr("id", item.id).css("margin", "8px");
var link_src = "https://www.flickr.com/photos/" + owner + "/" + item.id + "/in/set-"+phot_set_id;
var img_link = $("<a/>").attr("href", link_src);
var img_thumb = $('<img />').attr({src:img_src}).appendTo($('<a />').attr({href:link_src,target:"_blank"}).appendTo($('.owl-carousel')).wrap("<div></div>"));
});
});
}
$(document).ready(function() {
getFlickrImages("72157650210689192"); // Call the function!
});
</script>
<!-- OWL CAROUSEL - http://www.owlcarousel.owlgraphic.com/ -->
<script src="owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
</body>