Как написать объект данных JSON var для JQuery Galleria - PullRequest
Новая
       10

Как написать объект данных JSON var для JQuery Galleria

0 голосов
/ 23 июня 2010

У меня проблема с JQuery Galleria, и сотрудник службы поддержки сказал, что это ошибка, и чтобы исправить ее, я должен поместить свои изображения в объект данных JSON var в моем Javascript.

К сожалению для меня, у меня нет опыта в этом, и их информация не очень ясна. На их веб-сайте поддержки они показывают следующий код в качестве примера: 

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-кодирования, мне, вероятно, нужен пример, который поможет мне понять, что делать. Спасибо.

Ответы [ 3 ]

3 голосов
/ 23 июня 2010

Я пытался сделать то же самое.Вот что я придумал: 

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

Надеюсь, это поможет!

1 голос
/ 24 февраля 2012

Я использую версию 1.2.6, поэтому, возможно, предыдущие примеры используют более раннюю версию. В любом случае, в предыдущих примерах кода для передачи массива json используется параметр data_source. Для галереи 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 instatiation (например, это мой контейнер для моего вызова экземпляра $ ('# photoGallery1'). Galleria ({..

4) заполнить массив JSON перед созданием галереи

Это очень изящный виджет галереи. Брось "любовь" создателю!

1 голос
/ 15 марта 2011

Документация Galleria не сообщает о том, чтобы поместить функцию Galleria.loadTheme и $('#galleria').galleria в скрипт $(document).ready(function() {...}, но оставляет их в скрипте тега после тега <div id="galleria">

...