加载照片库后初始化flexslider

时间:2013-03-18 15:44:50

标签: jquery json flexslider

我正在与一位朋友合作完成一个项目,但在点击查看图库后,我们无法确定如何重新初始化。有什么想法吗?提供的代码:

jQuery(document).ready(function(){
    fetchAlbumList();
});

function fetchAlbumList() {
    jQuery.ajax({
        url:'https://picasaweb.google.com/data/feed/api/user/107232985562777672515' + '?alt=json&callback=?',
        dataType:'json',
        success:function(data){
            var albumList = '';
            for (var i = 0; i < data.feed.entry.length; i++) {
              albumList += '<li class="onethird column"><div class="pod"><div class="podContent">';
              albumList += '<img src="' + data.feed.entry[i].media$group.media$content[0].url + '"/>';
              albumList += '<h2>' + data.feed.entry[i].media$group.media$title.$t + '</h2>';
              albumList += '<a href="javascript:void(0)" onclick="fetchAlbum(&quot;' + data.feed.entry[i].id.$t + '&quot;)" class="button">View Gallery</a>';
              albumList += '</div></div></li>';
            };

            jQuery('.albumList').html(albumList);
        }
    });
}

function fetchAlbum(albumID) {
    jQuery.ajax({
        url:albumID.replace('entry','feed') + '&callback=?',
        dataType:'json',
        success:function(data){
            console.log(data);

            jQuery('.albumPhotos').html('');

            var photoList = '<ul class="slides">'
            for (var i = 0; i < data.feed.entry.length; i++) {
              photoList += '<li><img src="' + data.feed.entry[i].content.src + '"/></li>';
            };
            photoList += '</ul>'
            var href = jQuery(this).attr('href');

            var albumPhotos = '<h2>' + data.feed.title.$t + '</h2>';
            albumPhotos += '<div class="sliderWrapper"><div id="slider2" class="flexslider">';
            albumPhotos += photoList;
            albumPhotos += '</div><div id="carousel2" class="flexslider">';
            albumPhotos += photoList;
            albumPhotos += '</div></div>';

            jQuery('.albumPhotos').html(albumPhotos);

            jQuery('#carousel2').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 210,
                itemMargin: 5,
                asNavFor: '#slider2'
            });

            jQuery('#slider2').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                sync: "#carousel2"
            });
        }
    });
}

需要有关如何重新初始化它的帮助。我想要开始回调,但我可能错了。

1 个答案:

答案 0 :(得分:0)

如果要从Flexslider动态添加/删除幻灯片,则需要使用:

$('#slider').data('flexslider').addSlide(obj);
$('#slider').data('flexslider').removeSlide(obj);

这可能是相对的。 Add or remove slides using jQuery FlexSlider