jQuery галерея вид из приложения - PullRequest
Новая
       12

jQuery галерея вид из приложения

0 голосов
/ 23 октября 2011

Я динамически добавляю изображения через цикл из базы данных flickr.com.Я добавляю эти теги 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, добавление не вызываетт работа.Но я обнаружил, что если я медленно загружаю страницу и запускаю код добавления, это работает.Как я могу использовать добавление, а затем использовать представление галереи для добавленных элементов?

Исходный код: 

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
    }
}

1 Ответ

0 голосов
/ 23 октября 2011

Попробуйте добавить обратный вызов (для 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
});

Пытаетесь ли вы запустить jQuery до того, как DOM завершит анализ?Попробуйте выполнить код после загрузки браузера. 

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

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

...