使用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-下载

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