上一篇我們簡單地用google spreadsheet雲端試算表成功製作成一個資料庫，讓跨網域的網頁可以讀取裡面的資訊
所以今天我們就用資料庫裡面的資料在網頁前端自己產生一個聯播網(圖片連結)吧～
以後就可以在一個頁面裡面統一修改所有版位的圖片跟連結摟
前端程式碼
<!--自製聯播網-->
<a href=""id='imgtarget'target="_blank"title='1100x380'name='3709'></a>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
var sheetid = '1DOtv8YphhwGS9ckFl8PSkvt5d8LTKYetZ7L2E0BLh1M',//google spreadsheet公開以後在共用連結中間那段
sheetno = 1,//第幾個頁籤
imgurl = 'https://spreadsheets.google.com/feeds/list/'+sheetid+'/'+sheetno+'/public/values?alt=json-in-script&callback=?';
$.getJSON(imgurl,
function(json){
var e = json.feed.entry,
l = e.length,
html = "",
targetsize = document.getElementById('imgtarget').title,
entry, i, href, size,src,alt,title;
console.log(targetsize);
for (i = 0; i < l; i++) {
entry = e[i];
size = entry.gsx$size.$t;
console.log(size);
if (size==targetsize) {
href = entry.gsx$href.$t;
src = entry.gsx$src.$t;
alt = entry.gsx$alt.$t;
title = entry.gsx$title.$t;
var img = document.createElement("img"),
imgtarget = document.getElementById('imgtarget'),
utm_source = imgtarget.name;
imgtarget.href = href+"utm_source="+utm_source;
img.src = src;
img.alt = alt;
img.title = title;
img.style.width = "100%";
imgtarget.appendChild(img);
};
}
}
);
</script>
