JavaScript + Ajax 実践サンプル集 - MooToolsのfloomプラグインを利用してイメージをスライドさせる

MooToolsのfloomプラグインを利用してイメージをスライドさせる

説明コード関連書籍コメント投稿

このサンプルは、MooToolsの floom プラグインを利用してイメージをスライドさせます。サンプルが表示されるとイメージが左側からセクション化されて徐々に切り替わります。 jQueryにも同じようなプラグインがありますが、今回はイメージが気に入ったの久しぶりにMooToolsのプラグインを取り上げました。

このサンプルを編集して試してみる

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Floom 1.0</title>
  <link href="Mootools/floom/screen.css" rel="stylesheet" type="text/css" />
  <link href="Mootools/floom/floom/floom.css" rel="stylesheet" type="text/css" />
  
  <script src="Mootools/floom/mootools-1.2.2-core.js" type="text/javascript"></script>
  <script src="Mootools/floom/mootools-1.2.2.2-more.js" type="text/javascript"></script>
  <script src="Mootools/floom/source/floom.js" type="text/javascript"></script>
  	
	<script type="text/javascript" charset="utf-8">
	  window.addEvent('domready', function (e) {

// option 1		
	    var slides = [
				{
				  image: 'nature-photo0.jpg',
				  caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
				},
				{
				  image: 'nature-photo1.jpg',
				  caption: 'Excepteur sint occaecat cupidatat non proident'
				},
				{
				  image: 'nature-photo2.jpg',
				  caption: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.'
				},
				{
				  image: 'nature-photo3.jpg',
				  caption: 'Deserunt mollit anim id est laborum'
				},
				{
				  image: 'nature-photo4.jpg',
				  caption: 'Laboris nisi ut aliquip ex ea commodo consequat'
				}
			];

// option 2
	    // var slides = $$('#blinds img');

$('blinds').floom(slides, {
	      slidesBase: 'Mootools/floom/slides/',
	      sliceFxIn: {
	        top: 20
	      }
	    });

});
	</script>
		
</head>