jQuery galleryview from append

Question

I'm dynamically adding images via a loop from the flickr.com database. I append these ul, li, img tags as you should do according to the galleryview example. I append it to a div then I call the galleryview function:

$('#gallery').galleryView({
  panel_width: 800,
  panel_height: 300,
  frame_width: 50,
  frame_height: 50,
  transition_speed: 350,
  easing: 'easeInOutQuad',
  transition_interval: 0
});

It works if I manually add the ul, li, img tags on the front page but if I add them using jQuery append it doesn't work. But I found that if I make the page load slowly and instantly run the append code it works. How can I use append and afterwards use the galleryview on the appended elements?

Source code:

function initialize_flickr(_div){
    var newDiv = $(document.createElement('div'));

    //add some style to the div
    $(newDiv).css('background-color', '#223');
    $(newDiv).css('width', 800);
    $(newDiv).css('height', 800);
    $(newDiv).css('position', 'absolute');
    $(newDiv).css('left', 500);
    $(newDiv).css('top', 0);

    //append it to the _div
    newDiv.appendTo(_div);

    // Our very special jQuery JSON function call to Flickr, gets details of the most recent 20 images             
    $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=998875@N22&lang=en-us&format=json&jsoncallback=?", displayImages);

    function displayImages(data) {                                                                                                                                 
        // Randomly choose where to start. A random number between 0 and the number of photos we grabbed (20) minus 9 (we are displaying 9 photos).
        var iStart = Math.floor(Math.random()*(11));    

        // Reset our counter to 0
        var iCount = 0;                             

        // Start putting together the HTML string
        var htmlString = "<ul id='gallery'>";                   

        // Now start cycling through our array of Flickr photo details
        $.each(data.items, function(i,item){

            // Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed                   
            if (iCount > iStart && iCount < (iStart + 10)) {

                // I only want the ickle square thumbnails
                var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");      

                // Here's where we piece together the HTML
                htmlString += '<li>';
                htmlString += '<span class="panel-overlay">'+item.title+'</span>';
                htmlString += '<img src="'+sourceSquare+'" />';
                htmlString += '</li>';
            }
            // Increase our counter by 1
            iCount++;
        });     

    // Pop our HTML in the #images DIV  

    $(newDiv).append(htmlString + "</ul>").each(function(){

        $('#gallery').galleryView({
            panel_width: 800,
            panel_height: 300,
            frame_width: 50,
            frame_height: 50,
            transition_speed: 350,
            easing: 'easeInOutQuad',
            transition_interval: 0
        });
    });

    // Close down the JSON function call
    }
}

Answer 1

Try adding a callback(for galleryView) to your append. This way you are calling galleryView only after your append.

 $(newDiv).append(htmlString + "</ul>").each(function(){ $('#gallery').galleryView({ panel_width: 800, panel_height: 300, frame_width: 50, frame_height: 50, transition_speed: 350, easing: 'easeInOutQuad', transition_interval: 0 }); });

Each Callback Example-

.appendTo('#element').each(function() { 
      //Call galleryView here
});

Are you trying to run your jQuery before the DOM has finishing parsing? Try executing your code after the browser has loaded.

$(document).ready(function() {
    // put all your jQuery goodness in here.
});

http://www.learningjquery.com/2006/09/introducing-document-ready