0

I'm working with a friend on a project and we're having trouble figuring out how to re-initialize after we click to view a gallery. Any thoughts? Code provided:

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"
            });
        }
    });
}

Just need help on how to re-initialize it. I'm figuring there will need to be a start callback, but I could be wrong.

user1075615
  • 53
  • 2
  • 2
  • 8

1 Answers1

0

If you want to dynamically add/remove slides from Flexslider you need to use:

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

This may be relative. Add or remove slides using jQuery FlexSlider

Community
  • 1
  • 1
user2306329
  • 1