来自附加的 jQuery 画廊视图

Question

我通过循环从 flickr.com 数据库动态添加图像。我附加了这些 ul、li、img 标签，就像您根据 galleryview 示例应该做的那样。我将它附加到 div 然后调用 galleryview 函数：

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

如果我在首页上手动添加 ul、li、img 标签，它会起作用，但如果我使用 jQuery 附加添加它们，它就不起作用。但我发现，如果我让页面加载缓慢并立即运行附加代码，它就可以工作。如何使用附加，然后在附加元素上使用画廊视图？

源代码：

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

尝试将回调（用于 galleryView）添加到您的附加中。这样，您仅在追加后才调用 galleryView。

 $(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 }); });

每个回调示例 -

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

您是否尝试在 DOM 完成解析之前运行 jQuery？尝试在浏览器加载后执行您的代码。

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

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