flexslider 不能与我的 getJSON 响应一起工作 :( 知道为什么吗?我应该了解 flexslider 还是你们知道其他更适合这种情况的滑块工具包?
html
<body>
<div class="flexslider">
<ul class="slides">
</ul>
</div>
<script id="gallery" type="insta/template">
<li><img src={{link}} alt=""/></li>
</script>
</body>
jQuery
function fetchingPhotos(tag) {
return $.ajax({
url: "https://api.instagram.com/v1/tags/" + tag + "/media/recent?client_id=c1302f417cda4e09968eaec958fe0ae2&callback=?",
//data: {q: data},
dataType: 'jsonp'
});
};
function toStage(photos) {
template = $('#gallery').html();
var photoBox = ' ';
$.each(photos.data, function (index, value) {
var obj = value.images.low_resolution.url;
photoBox += template.replace(/{{link}}/, obj)
});
$('.flexslider .slides').append(photoBox);
// $('#album ul li').css('border', '1px solid red');
};
function flex(){
$('.flexslider .slides').flexslider({
animation: "slide",
smoothHeight: true // auto-adjust to fit the height of images
});
};
$.when(fetchingPhotos('cats') ).done(function(results1){
toStage(results1)
console.log('1');
flex();
console.log('2');
});