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

Question

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

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/

Answer 1

Я не уверен точно в чем проблема, но когда вы делаете:

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