トップ  >  2010年  >  - 20100115 jQuery でスライドショー(Photo Slider Tutorial)
features
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>
ここでは、jQuery は 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>
当サイトで表示できるように調整しました
前
2010.01.15 jQuery でスライドショー
カテゴリートップ
2010年

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2019 keibunsya all right reserved.