Интеграция Google Таблиц Json и Owl Slider

Я искал способ использовать листы Google для включения ползунка совы, основная причина в том, что я хочу иметь возможность динамически обновлять кучу ползунков из потока данных.

Возникшая у меня проблема заключается в том, что Owl Slider не сможет интерпретировать JSon, который выводит лист Google. В соответствии с их примерами здесь и форматом кода ниже.

{
  "items" : [
    {
      "img": "assets/owl1.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl2.jpg",
      "alt" : "Owl Image 2"
    },
    {
      "img": "assets/owl3.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl4.jpg",
      "alt" : "Owl Image 2"
    },
    {
      "img": "assets/owl5.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl6.jpg",
      "alt" : "Owl Image 2"
    }
  ]
}

Итак, мой подход заключался в том, чтобы использовать jquery для анализа листа Google сначала для создания дочерних элементов, а затем нацелить div карусели совы, чтобы уже были слайды, чтобы он мог вращаться, каждый раз, однако, я не могу заставить его просто анимировать сидит на первом элементе.

Я пытался получить его в codepen, но он не работает для меня. вот рабочая ссылка, в приложенном примере я нацеливаюсь не на сову div, а только на ту, которую я сделал, чтобы JSon работал

http://www.tmkcreative.com/test-slider/index.html

Любая помощь или совет будут оценены.


javascript json jquery google-sheets-api
person mcktj    schedule 27.11.2016    source источник
comment
Это не ответ, но похоже, что ваш код использует старый API gdata для доступа к Таблицам. Взгляните на новый API Таблиц — там есть полезные примеры доступа к данным в формате JSON в образцы и руководства.   -  person Bardy    schedule 28.11.2016
comment
Спасибо за это - я посмотрю и посмотрю, прольет ли это свет :) Код действительно работает в других контекстах, возможно, это связано с порядком выполнения моих скриптов, который вызывает проблемы.   -  person mcktj    schedule 28.11.2016

Ответы (1)


arrow_upward
0
arrow_downward

Итак, немного поигравшись, я смог заставить его работать, проблема заключалась в элементе DOM, на который я нацелился с помощью своей функции. Единственная проблема, которая у меня есть на данный момент, заключается в том, что мне нужно заполнить целевой div количеством слайдов, которые я хочу извлечь из файла JSON, что не является серьезной проблемой, поскольку, скорее всего, будет установленная сумма, которую я, скорее всего, отобразлю , но это было бы ince, если бы это было завершено динамически.

// ID of the Google Spreadsheet
var spreadsheetID = "SPREADSHEET-KEY";

// Make sure it is public or set to Anyone with link can view 
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";

// make JSON call to Google Data API
$.getJSON(url, function(data) {

// set global html variable
var html3 = '';

// loop to build html output for each row
var entry = data.feed.entry;
/**
** Change to descending order
** for (var i = entry.length - 1; i >= 0; i -= 1) {
 */
for (var i = 0; i < entry.length; i++) {
 html3 += '<div class="owl-item"><div class="item"><a href="' + entry[i]['gsx$img']['$t'] + '"><img class="lazyOwl" src="' + entry[i]['gsx$img']['$t'] + '" alt=" '+ entry[i]['gsx$alt']['$t'] + '"></a></div></div>';  

}
 // output html
   $('#owl-demo2 > div.owl-wrapper-outer > div ').html(html3);
person mcktj    schedule 04.12.2016