How to Write JSON var data Object for JQuery Galleria

Question

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: '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.

Answer 1

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!