jQuery でスライドショー 2010.01.15記

  戻る

Photo Slider Tutorial

  http://opiefoto.com/articles/photoslider

HTML

<div id="default" class="photoslider"></div>

ヘッダ JavaScript

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<script type="text/javascript" src="/common/pSlider/photoslider.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){ 
	FOTO.Slider.baseURL = "./files/20100115/";
	FOTO.Slider.bucket = {
		"default" : {
			0 : {"thumb":"g1s50.jpg", "main":"g1.jpg" },
			1 : {"thumb":"g2s50.jpg", "main":"g2.jpg" },
			2 : {"thumb":"g3s50.jpg", "main":"g3.jpg" },
			3 : {"thumb":"g4s50.jpg", "main":"g4.jpg" },
			4 : {"thumb":"g5s50.jpg", "main":"g5.jpg" }
		}
	}
	FOTO.Slider.reload("default");
	FOTO.Slider.preloadImages("default");
	FOTO.Slider.play("default");
});
// -->
</script>

ここでは、ｊQuery は Google AJAX Libraries API を利用してロードしています。
google.load("jquery", "1");　これだと　1.3系がロードされるようなので以下のように1.2系にします
↓
google.load("jquery", "1.2.6");

CSS

<link rel="stylesheet" href="/common/pSlider/photoslider.css" type="text/css">
<style type="text/css" media="screen">
.photoslider_main {
	height:200px;
}
.photoslider_nav {
	width:580px;
}
</style>

当サイトで表示できるように調整しました