0

我在使用 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 编码经验，我可能需要一个示例来指导我该怎么做。谢谢。

4

3 回答 3

3

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

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

希望有帮助！

于 2010-06-23T17:10:27.697 回答
1

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

于 2011-03-15T12:10:45.790 回答
1

我使用的是 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 数组

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

于 2012-02-24T05:34:17.120 回答