Question

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

用于捕获所单击菜单项的ID的事件处理程序。这是图库名称，告诉脚本在哪里可以找到特定图库的图像和xml文件。
从xml中提取图像信息并将其转换为可用JSON的功能。
将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);
    });
 }

点击JSON数据加载Galleria画廊。我需要新鲜的眼睛来看我的错误

1 个答案: