02
14
Google AJAX Feed APIでスライドショーを設置
2008-02-14まずJavaScriptは以下のようになります。API keyについてはこちらで取得してください。
<script src="http://www.google.com/jsapi/?key=取得したAPI Key"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
var samples = "表示するRSS";
var options = {
linkTarget : google.feeds.LINK_TARGET_BLANK,
fullControlPanel : true
};
new GFslideShow(samples, "sampleSlideshow", options);
options = {
displayTime: 2000,
transistionTime: 600,
scaleImages: true,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>
次のCSSで画像を表示する枠を定義します。
<style type="text/css">
.gslideshow {
margin-left: auto;
margin-right: auto;
background-color: #000000;
}
.gslideshow a img {border : none;}
#sampleSlideshow { width : 288px; height : 216px; padding: 10px;}
.feed-loading {
width: 100%;
padding-top: 10px;
font-size : 11px;
text-align : center;
color : #dddddd;
}
</style>
でbody内の表示する場所に以下を挿入します。
<div id="sampleSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
