使用 JSON 数据单击加载 Galleria 画廊。我需要新的眼光来看待我的错误

Question

我的脚本可以分为三个部分：

1. 事件处理程序用于捕获单击的菜单项的 ID。这是画廊名称，它告诉脚本在哪里可以找到特定画廊的图像和 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);
    });
 }