Загрузка галерей Galleria по клику с данными JSON. Мне нужен свежий взгляд, чтобы увидеть свои ошибки

Мой сценарий можно разбить на три части:

  1. Обработчики событий для захвата идентификатора выбранного пункта меню. Это имя галереи, которое сообщает сценарию, где найти изображения и XML-файл конкретной галереи.
  2. Функция для извлечения информации об изображении из xml и преобразования ее в пригодный для использования JSON.
  3. Загрузка JSON в Galleria.

Либо JSON не попадает в Galleria, либо я загружаю его неправильно. К сожалению, я слишком новичок в JS, чтобы эффективно отлаживать это. Я чувствую, что я в довольно глубокой воде с этим.

Сайт находится по адресу http://willowbrook.businesscatalyst.com/showcase.

Вот мой сценарий. Я использую последнюю версию jQuery и плагин xml2json.

$(document).ready(function() {

var firstGallery            = 'kitchens';
var galleriaNavID           = '#showcasenav';
var galleriaID          = '#showcaseitems';
var selectedClass           = 'selected';
var imageFolder         = '/images/showcase/'; // Don't forget the / (forward slash) before and after
var xmlFileName         = 'PhotoGallery.xml';
var selectedNavElement  = galleriaNavID+' .'+selectedClass;
var galleryName         = $(selectedNavElement).attr('id');

if(galleryName == null) {
    galleryName = firstGallery;
    $('#'+firstGallery).click();
};

function loadGalleria() {
    function GalleriaBCtoJson() {   // Convert PhotoGallery XML to JSON and load dynamically into Galleria

        var data = new Array;

        $.get(imageFolder+galleryName+'/'+xmlFileName, function(xml){
            var i;
            var imgArray = $.xml2json(xml).album.img;
            for(i in imgArray) { 
                data.push({ image: imageFolder+galleryName+'/'+imgArray[i].src });
            };
        });
        return data;
    };

    var data = GalleriaBCtoJson();

    if ($(galleriaID).data('galleria')) { // If Galleria has already been initialized,
        $(galleriaID).data('galleria').load( data ); // load galleria with the new data
    }
    else {  // Call Galleria, set options,
        $(galleriaID).galleria({    
            dataSource: data,   // and add the data as dataSource
            image_crop: true,
            carousel: true,
            carousel_speed: 2000,
            autoplay: 5000,
            thumbnails: true,
            showInfo: false,
            transition: 'fade',
            transition_speed: 600,
            lightbox: true,
            easing: 'galleriaIn',
            pauseOnInteraction: false,
            debug: false
        });
    }
};


$(galleriaNavID+' a').click(function(e) { // attach event handler to the menu
    e.preventDefault();

    $(selectedNavElement).removeClass(selectedClass); // toggle selected class
    $(this).addClass(selectedClass);

    galleryName = $(this).attr('id');
    loadGalleria();
});

});

Вот мое готовое решение с использованием совета. Это отлично работает:

            galleria : function(){
            $(document).ready(function() {

                var firstGallery        = 'kitchens';
                var galleriaNavID       = '#showcasenav';
                var galleriaID          = '#showcaseitems';
                var selectedClass       = 'selected';
                var imageFolder         = '/images/showcase/';  // Don't forget the / (forward slash) before and after
                var xmlFileName         = 'PhotoGallery.xml';
                var selectedNavElement  = galleriaNavID+' .'+selectedClass;
                var galleryName         = $(selectedNavElement).attr('id');

                if(galleryName == null) {
                    galleryName = firstGallery;
                };

                function loadGalleria() {
                    function GalleriaBCtoJson(callback) {   // Convert PhotoGallery XML to JSON and load dynamically into Galleria

                        var data = [];

                        $.get(imageFolder+galleryName+'/'+xmlFileName, function(xml){
                            var i;
                            var imgArray = $.xml2json(xml).album.img;
                            for(i in imgArray) { 
                                data.push({ image: imageFolder+galleryName+'/'+imgArray[i].src });
                            };
                            callback(data);
                        });
                    };

                    var data = GalleriaBCtoJson(function(data) {
                        if ($(galleriaID).data('galleria')) {   // If Galleria has already been initialized,
                            $(galleriaID).data('galleria').load( data );    // load galleria with the new data
                        }
                        else {  // Call Galleria, set options,
                            $(galleriaID).galleria({    
                                dataSource: data,   // and add the data as dataSource
                                image_crop: true,
                                carousel: true,
                                carousel_speed: 2000,
                                autoplay: 5000,
                                thumbnails: true,
                                showInfo: false,
                                transition: 'fade',
                                transition_speed: 600,
                                lightbox: true,
                                easing: 'galleriaIn',
                                pauseOnInteraction: false,
                                debug: false
                            });
                        }
                    });
                };


                $(galleriaNavID+' a').click(function(e) {   // attach event handler to the menu
                    e.preventDefault();

                    $(selectedNavElement).removeClass(selectedClass);   // toggle selected class
                    $(this).addClass(selectedClass);

                    galleryName = $(this).attr('id');
                    loadGalleria();
                });

                $('#'+firstGallery).click();
            });
        }

Только не забудьте поставить плагины xml2json и galleria в голову. Их можно найти по адресу: http://www.fyneworks.com/jquery/xml-to-json/#tab-Download

и http://galleria.io/


xml json jquery galleria
person Adam Cook    schedule 10.03.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не уверен, точно в чем проблема, но если вы это сделаете:

var data = GalleriaBCtoJson();

... вы получите пустой массив, потому что обратный вызов $.get еще не был вызван. Функция возвращает data, но поскольку она возвращается до завершения ajax, она пуста. Вы можете подтвердить это с помощью простой консоли.

Вам нужно сделать что-то вроде:

GalleriaBCtoJson(function(data) {
    // continue using data
});

И GalleriaBCtoJson:

function GalleriaBCtoJson(callback) {
    var data = [];
    $.get(url, function(xml){
        // loop and insert into data here
        callback(data);
    });
 }
person David Hellsing    schedule 11.03.2012
comment
Итак, не могли бы вы предложить поместить мой if/else внутри вызова функции (где вы поместили // продолжить использование данных)? Я думаю, я не понимаю, как ajax не завершен к тому времени, когда он назначается переменной данных. - person Adam Cook; 12.03.2012
comment
@AdamCook Да, что-то в этом роде. Когда вы возвращаете data, он пуст. Заполнение data.push() выполняется после возврата, поэтому вам нужно вызвать другую функцию после завершения заполнения вместо возврата данных из функции, так называемый обратный вызов. Это типично для асинхронного программирования, и вам стоит подумать об этом сейчас, если вы планируете программировать JavaScript в будущем. - person David Hellsing; 13.03.2012