jquery use plugin on dynamic content

Question

I'm trying to create an image gallery from an rss feed with the galleryview plugin. When the html content is statically in the page the plugin works but when I generate the html dynamically from the rss feed calling the plugin seems to do nothing. Here is the code I'm using:

function getScrollerContent() {
    $.get('photos.rss', {}, function(xml) {
        var contentHtml = '';
        var filmStripHtml = '<ul class="filmstrip">';
        $('item', xml).each(function(i) {
            contentHtml += '<div class="panel">';
            var imgSrc = $(this).find('image').text();
            contentHtml += '<img src="' + imgSrc + '" />';
            contentHtml += '<div class="panel-overlay">';
            contentHtml += '<h2><a href="' + $(this).find('link').text() + '">' + $(this).find('title').text() + '</a></h2>';
            contentHtml += '<p>' + $(this).find('desc').text() + '</p>';
            contentHtml += '</div>';
            contentHtml += '</div>';
            filmStripHtml += '<li><img src="' + imgSrc + '" /></li>';
        });
        filmStripHtml += '</ul>';
        contentHtml += filmStripHtml;

        $('#photos').append(contentHtml);
    });

    $('#photos').galleryView({
        panel_width: 800,
        panel_height: 300,
        frame_width: 100,
        frame_height: 100
    });


}

$(getScrollerContent);

What am I doing wrong?

Answer 1

The get call is asynchronous so you need to add the call to galleryview at the end of the callback function in your get as get returns immediately and then galleryview is called (on an empty div):

$.get('photos.rss', {}, function(xml) {

    // rest of your code here

    $('#photos').galleryView({
      panel_width: 800,
      panel_height: 300,
      frame_width: 100,
      frame_height: 100
    });
});