モーションアニメ付きスライドショー/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Slideshow 2!</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" />
	<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
	<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript" src="js/slideshow.js"></script>
	<script type="text/javascript" src="js/slideshow.kenburns.js"></script>
	<script type="text/javascript">		
	//<![CDATA[
	  window.addEvent('domready', function(){
	    var data = {
	      '1.jpg': { caption: 'caption1' }, 
	      '2.jpg': { caption: 'caption2' }, 
	      '3.jpg': { caption: 'caption3' }, 
	      '4.jpg': { caption: 'caption4' }
	    };
	    var myShow = new Slideshow.KenBurns('show', data, { captions: true, delay: 5000, duration: 2000, height: 400, hu: 'images/', width: 666 });
		});
	//]]>
	</script>

</head>
<body>
  
  <div id="show" class="slideshow"></div>
  
</body>
</html>

	Slideshow 2! A javascript class for Mootools 1.2 to stream and animate the presentation of images on your website

モーションアニメーション付きのスライドショーです。
mootools.js を使用します。
モーションの種類はいろいろ選択できるようですが、今回の説明では拡大→縮小アニメを説明します。

セッティング

１．ダウンロード＆セッティング

http://slideshow.googlecode.com/files/Slideshow2r147.zip から、必要なファイルをダウンロードしてください。
解凍したら js/mootools.js と js/slideshow.js と slideshow.kenburns.js と css/slideshow.css をアップロードします。