如何为 JQuery Galleria 编写 JSON var 数据对象答案

【问题标题】：How to Write JSON var data Object for JQuery Galleria如何为 JQuery Galleria 编写 JSON var 数据对象
【发布时间】：2010-06-23 13:07:23
【问题描述】：

我在使用 JQuery Galleria 时遇到问题，那里的支持人员说这是一个错误，要修复它，我必须将我的图像放入我的 Javascript 中的 JSON var 数据对象中。

不幸的是，我没有这样做的经验，他们的信息也不是很清楚。在他们的网站支持上，他们以以下代码为例：

var data = [
{
image: 'img1.jpg' thumb: 'thumb1.jpg' title: 'my first image', description: 'Lorem       ipsum caption' link: 'http://domain.com'
}, {

image: 'img2.jpg' thumb: 'thumb2.jpg' title: 'my second image', description: 'Another   caption' link: '/path/to/destination.html'
}

];

$('#container').galleria({
data_source: data
});

目前我只是在创建大型图形，然后在 Javascript 中调用它们，如下所示：

$(document).ready(function() {
    // Load theme
    Galleria.loadTheme('themes/classic/galleria.classic.js');

    // run galleria and add some options
    $('#galleria').galleria({
        debug: true,
        image_crop: true,
        height: 397,
        max_scale_ratio: 1, //Ensures the picture crop doesn't zoom the picture
        autoplay: 8000, //Sets an autoplay interval of 8 seconds (8000)
        transition: 'fade',
        data_config: function(img) {
            return {
                description: $(img).next('p').html()
            };
        }
    });

有人可以帮助我了解我接下来必须做什么才能进行设置并测试它是否有效吗？鉴于我缺乏 JSON 编码经验，我可能需要一个示例来引导我完成操作。谢谢。

【问题讨论】：

标签： jquery json galleria

【解决方案1】：

我试图做同样的事情。这是我想出的：

    <script>
var data = [
    { image: 'images/projects/graphic/agape/agape_shirt.png' },
    { image: 'images/projects/graphic/agape/agape_guitar.png' }
];

$('.graphic_project').galleria({
    transition: 'fade',
    data_source: data
    });
</script>

希望有帮助！

【讨论】：

是的，这正是我尝试过的，而且效果很好。谢谢。

【解决方案2】：

Galleria 文档没有报告将Galleria.loadTheme 函数和$('#galleria').galleria 函数放在$(document).ready(function() {...} 脚本中，而是将它们放在<div id="galleria"> 标记之后的标记脚本中

【讨论】：

【解决方案3】：

我使用的是 1.2.6 版本，所以前面的示例可能使用的是早期版本。无论如何，前面的代码示例使用 data_source 参数来传递 json 数组。对于 Galleria 的 v1.2.6，参数/属性是 dataSource（即没有下划线）。

这也是我的代码（去掉了不重要的 HTML 和页面内容）：

<HTML>
<HEAD>
...blahblahblah....

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="/Scripts/galleria/galleria-1.2.6.min.js"></script>

</HEAD>
<BODY>
...blahblahblah...
     <div id="photoGallery1">
     <!-- photoGallery1 is the id for the container that galleria will "pour"
            the image gallery into. This is due to the element being referenced
               in the galleria instantiation below.
                    i.e. **$('#photoGallery1').galleria**... -->
     </div>

...blahblahblah...

    <Script>
        $(document).ready(function() {
            // Load theme
            Galleria.loadTheme('/Scripts/galleria/themes/classic/galleria.classic.min.js');

            var gallery1Data = [
                {
                thumb: '/Images/Gallery1/Thumb01.jpg',
                image: '/Images/Gallery1/SunsetSmall.jpg',
                    big: '/Images/Gallery1/SunsetSmall.jpg',
                title: 'Sunset Small',
                description: 'Yet another lovely Oaxaca sunset on a day of MTBing',
                link: 'http://www.OaxacaMTB.org/Images/SunsetSmall.jpg',
                layer: '<div><h2>This image is gr8</h2><p>And this text will be on top of the image</p>'
            },
            {
                thumb: '/Images/Gallery1/Thumb02.jpg',
                image: '/Images/Gallery1/TrailBiker-Small.jpg',
                big: '/Images/Gallery1/TrailBiker-Small.jpg',
                title: 'Trail Biker Small',
                description: 'Looks like a biker out on a day of MTBing',
                link: 'http://www.OaxacaMTB.org/Images/Gallery1/TrailBiker-Small.jpg',
                layer: '<div><h2>This image is also gr8</h2><p>Good luck with Galleria!</p>'
            }
            ];

        $('#photoGallery1').galleria({
            dataSource: gallery1Data,
            transition: 'slide',
            transitionSpeed: 750,
            autoplay: 2500,
            imageCrop: true,
            maxScaleRatio: 1,
            overlayBackground: '#39561D',
            height: 500,
            width: 500
        });


        })
    </script>

...blahblahblah...
</BODY>
</HTML>

要点：
1) 确保您的 HEAD 部分包含 jQuery 代码库和 Galleria 代码库的脚本调用。

2) 确保 Galleria.loadTheme 调用在您的页面中。

3) 确保您提供的容器可以在 Galleria 实例化调用中使用选择器进行识别（例如，我的容器是我的实例化调用 $('#photoGallery1').galleria({..

4) 在 Galleria 实例化之前填充 JSON 数组

这是一个非常漂亮的画廊小部件。向创作者抛一些“爱”！

【讨论】：