Как написать JSON var data Объект для JQuery Galleria

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

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

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

источник

2010-06-23 aeisenbe

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

<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-23 17:10:27 katie

Да, это именно то, что я пытался и работал отлично. Спасибо. – aeisenbe

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

источник

2011-03-15 12:10:45 superperu

Я использую версию 1.2.6 так что, возможно предыдущую примеры используют более раннюю версию. Во всяком случае, в предыдущих примерах кода используется параметр data_source для передачи массива json. Для v1.2.6 galleria параметр/является источником данных (т. Е. Без подчеркивания).

Также здесь мой код (с неважной 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) убедитесь, что ваш ГОЛОВА раздел содержит сценарий требует библиотеки кода JQuery плюс библиотека библиотек.

2) убедитесь, что звонок Galleria.loadTheme находится на вашей странице.

3) убедитесь, что ваш предоставить контейнер, который может быть идентифицирован с селектором в instatiation вызова GALLERIA (например, мой контейнер для моего экземпляра вызова $ («# photoGallery1»). Галерея ({..

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

это очень изящная галерея виджетов. Перемешайте некоторые «любовь» к создателю!

источник

2012-02-24 05:34:17

Как написать JSON var data Объект для JQuery Galleria

ответ

Смежные вопросы