2015-12-21 17 views
7

Flickr resimlerinden bir Materyalize karuseli (bir kaydırıcı değil) dinamik olarak oluşturmaya çalışıyorum, ancak resimlerin değişmesini sağlayamadım. Gösteren resim her zaman Flickr'den alınan son fotoğraftır, bu yüzden bir şeyin kayıyor gibi olduğunu hissediyorum, ancak bir atlı karıncaya giden yolu döndürmeye devam etmiyor.Sorun Dinamik olarak oluşturulmuş bir malzeme tablosu başlangıcını başlatılıyor

Yanıtlar için SO ve Google'a baktım, ancak bilginin% 99'u Bootstrap'e özgüdür. İlk öğeye aktif bir sınıf ekledim ve javascript'in yanı sıra hem html'den hem de javascript'ten karuseli başlatmayı denedim, ancak hiçbiri yardımcı olmadı.

<div class="carousel initialized" id="flickrPic"></div> 

ve JS: Burada html kodu yardım

$.ajax({ 
type: "GET", 
url: flickrApiUrl + $.param(flickrApiParams), 
success: function(response) { 
    var flickrPetPics = response.photos.photo 
    for(i=0; i<flickrPetPics.length; i++) { 
     var newSlide = makeFlickrCarousel(flickrPetPics[i]);  
     $('.carousel-item').first().addClass('active'); 
     $('#flickrPic').carousel(); 
     $("#flickrPic").append(newSlide); 
    } 
    } 
}); 

function makeFlickrCarousel(photoInfo) { 
var flickPicUrl = "https://farm" + photoInfo.farm +".staticflickr.com/"; 
flickPicUrl += photoInfo.server + "/" + photoInfo.id + "_" + photoInfo.secret; 
flickPicUrl += "_q.jpg"; 

//Build carousel pieces 
var newItem = $("<a>").addClass("carousel-item"); 
var flickrImg = $("<img>").attr("src", flickPicUrl); 

newItem.append(flickrImg); 

return newItem; 
} 

teşekkürler!

cevap

0

Sen atlıkarınca div kabından sınıf .initialized kaldırıp böyle döngü sonra $('#flickrPic').carousel() başlatma hareket etmelidir:

... 

    for(i=0; i<flickrPetPics.length; i++) { 
     var newSlide = makeFlickrCarousel(flickrPetPics[i]);  
     $('.carousel-item').first().addClass('active'); 
     $("#flickrPic").append(newSlide); 
    } 
    $('#flickrPic').carousel(); // <-- Initialize the carousel after the loop has created the carousel markup 

    ... 
İlgili konular