Yardım edin!jQuery image carousel ayarları, dinamik oluşturulan içeriğe uygulanmaz (Flickr API)
Statik kod yerine dinamik yüklü içerikli bir görüntü karuseli (Owl Carousel) oluşturmaya çalışıyorum. Bu dinamik içerik jQuery ve Flickr API kullanılarak oluşturulur.
Aşağıda bulabileceğiniz komut dosyası, görüntüleri belirli bir Flickr albümünden alır ve verileri HTML öğelerine (image + link) dönüştürür. $ .each (data.photoset.photo, işlevini kullanarak (i, madde) {Bana verilen şartlara göre Karoselin içerik oluşturma ediyorum fonksiyonu.
konudur, o nasılsa jQuery ayarları Baykuş Atlıkarınca, dinamik oluşturulan içeriğe uygulanmaz .. Tarayıcıdaki inceleme elemanını kullanarak, içeriğin doğru bir şekilde üretildiğini görebiliyorum ve aynı zamanda bazı karusel ayarlarının üretilen içeriğe uygulandığını ancak ön uçta gösterilmediğini görebiliyorum. Not: Dinamik içeriğin statik içeriğe dönüştürülmesi ve karusel içerisine yerleştirilmesi iyi çalışır.Bir dinamik komutta jQuery eklentisinin başka bir komut dosyası kullanarak uygulanması kombinasyonuna benzemektedir. soruna neden oluyor. <body> (komut gerekli API anahtarı) den snipped
Kodu:
<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>