Question

我遇到了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编码经验，我可能需要一个示例来指导我做什么。感谢。

Answer 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>

希望有所帮助！

Answer 2

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

Answer 3

我使用的是1.2.6版本，因此前面的示例可能使用的是早期版本。无论如何，前面的代码示例使用data_source参数来传递json数组。对于galleria的v1.2.6，参数/ property是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 instatiation调用中用选择器识别的容器（例如我的实例化调用$（'＃photoGallery1'）的容器.galleria（{..

4）在galleria实例化之前填充JSON数组

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

如何为JQuery Galleria编写JSON var data Object

3 个答案: