GoogleスプレッドシートJson＆Owlスライダー統合

Question

私は、Googleシートを使用してフクロウのスライダを動かす方法を探していました。主な理由は、データフィードから多数のスライダを動的に更新できるようにすることです。

問題は、Owl SliderがGoogleシートから出力されるJSonを解釈できないことです。それらの例によるとhereと以下のコードフォーマット。

{ 
    "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" 
    } 
    ] 
} 

だから私のアプローチは、子項目を作成する最初のGoogleスプレッドシートを解析し、それを通じ回転させるようにするために、すでにそこにスライドを持っているフクロウカルーセルのdivをターゲットにjqueryのを使用するために、私はできないのですが、それぞれの時間となっていますそれをアニメーション化するには、最初のアイテムに単に置くだけです。

私はそれをcodepenに取得しようとしましたが、それは私のために働いていません。ここで働きリンクは、私はちょうど1私は、JSONはすべてのヘルプやアドバイスをいただければ幸いです

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

を働いていた作るために作られたフクロウのdiv要素をターゲットにないターゲットにしています添付の例では、あります。

Answer 1

私はそれを動作させることができましたが、問題は私の機能で目標としていたDOM要素でした。現在私が抱えている唯一の問題は、ターゲットのdivに、JSONファイルから取得するスライドの量を入力する必要があることです。重要な問題ではなく、おそらく表示される設定量これが動的に完了したのであれば、それは起きるだろう。

// 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);