How to Write JSON var data Object for JQuery Galleria_问答_开发者

I am having a problem with JQuery Galleria and the support person there said it's a bug and to fix it I have to put my images into a JSON var data object in my Javascript.

Unfortunately for me, I have no experience doing this and their information is not very clear. On their website support they show the following code as an example:

var data = [
{
image: 'img1.jpg' thumb: '开发者_C百科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
});

Currently I am simply creating the large graphics and then calling to them in a Javascript that looks as follows:

$(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()
            };
        }
    });

Can someone help me understand what I have to do next in order to set this up and test to see if it works? Given my lack of JSON coding experience, I probably need an example that walks me through what to do. Thanks.

I was trying to do the same thing. This is what I came up with:

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

Hope that helps!

The Galleria documentation does no report to put the Galleria.loadTheme function and the $('#galleria').galleria function in the $(document).ready(function() {...} script but leave them in a tag script after the <div id="galleria"> tag

I'm using version 1.2.6 so maybe the previous examples are using an earlier version. Anyway, the previous code examples use the data_source parameter for passing the json array. For v1.2.6 of galleria the parameter/property is dataSource (i.e. without an underscore).

Also here is my code (with unimportant HTML and page content cut out):

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

Key points:
1) make sure your HEAD section includes the script calls for the jQuery code library plus the galleria code library.

2) make sure the Galleria.loadTheme call is in your page.

3) make sure your provide a container that can be identified with a selector in the galleria instatiation call (e.g. is my container for my instantiation call of $('#photoGallery1').galleria({..

4) populate the JSON array prior to the galleria instantiation

It's a very nifty gallery widget. Toss some "love" to the creator!