Question

我是通过flickr.com数据库中的循环动态添加图像的。我根据galleryview示例附加了你应该做的这些ul，li，img标签。我将它附加到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追加它们，它就无效了。但是我发现，如果我慢慢加载页面并立即运行附加代码就可以了。如何使用append，然后在附加元素上使用galleryview？

源代码：

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

jQuery galleryview来自追加

1 个答案: