Floom

左から右にブラインドが開くように画像を切り替えるスライドショーです。
まずは配布元のデモをご覧ください。

このスクリプトを実行するにはMooToolsが必要です。

※スクリプトのバージョンを1.0から1.1にアップしました。それに合わせて記述も変更しています。(2010.4.21)

名称
Floom
配布元
Blogolicious.
ブラウザ対応
モダンブラウザでは問題ありませんが、IE6ではフリーズまたは強制終了します
必要なモジュール
MooTools
MooTools1.2.4では動作しませんでした。Blogolicious.およびここでは1.2.2を使っています。
ライセンス
MIT License

基本的な設置方法

設置方法には2通りがあります。

設置方法1

  1. head要素内にMooToolsとFloomのパス、スライドする画像、および関連するCSSのパスを記述します。
    <script type="text/javascript" charset="utf-8" src="mootools-1.2.2-core.js">
    	<script type="text/javascript" charset="utf-8" src="mootools-1.2.2.2-more.js"></script>
    	<script type="text/javascript" charset="utf-8" src="floom-1.0.js"></script>
    	<script type="text/javascript" charset="utf-8">
    	window.addEvent('domready', function(e) {
    	// option 1
    	var slides = [
    	{
    	image: 'photo1.jpg',
    	caption: 'Description 0'
    	},
    	{
    	image: 'photo2.jpg',
    	caption: Description 2''
    	},
    	{
    	image: 'photo3.jpg',
    	caption: 'Description 3'
    	},
    	{
    	image: 'photo4.jpg',
    	caption: 'Description 4'
    	},
    	{
    	image: 'photo5.jpg',
    	caption: 'Description 1'
    	}
    	];
    
    	$('blinds').floom(slides, {
    	axis: 'vertical'
    	});
    	});
    	</script>
    
    	<link rel="stylesheet" href="screen.css" media="screen" charset="utf-8" />
    	<link rel="stylesheet" href="floom/floom.css" media="screen" charset="utf-8" />
  2. body要素内に以下を記述します。
    <div id="blinds"></div>

設置方法2

  1. head要素内にMooToolsとFloomのパス、および関連するCSSのパスを記述します。
    <script type="text/javascript" charset="utf-8" src="mootools-1.2.2-core.js">
    	<script type="text/javascript" charset="utf-8" src="mootools-1.2.2.2-more.js"></script>
    	<script type="text/javascript" charset="utf-8" src="floom-1.0.js"></script>
    	<script type="text/javascript" charset="utf-8">
    	window.addEvent('domready', function(e) {
    
    	// option 2
    	$('blinds').floom($$('#blinds img'), {
    	axis: 'vertical'
    	});
    
    	});
    	</script>
    
    	<link rel="stylesheet" href="screen.css" media="screen" charset="utf-8" />
    	<link rel="stylesheet" href="floom/floom.css" media="screen" charset="utf-8" />
    var slides = $$('#blinds img');#blindsは、下記2のdivのidを記述します。
    slidesBase: 'slides/',slides/は、スライドさせる画像のフォルダ名(このHTMLを基点としたパス)を記述します。
  2. body要素内に以下を記述します。
    上記1で画像フォルダのパスを指定しているため、ここでは画像ファイル名だけでOKです。
    divのid="blinds-cont"は画像の枠です。
    img要素のtitle属性が、スライドショーのキャプションとなります。
    配布元ではul要素は使っていませんが、ulでマークアップしても問題ありません
    li要素でマークアップすると、IE7で表示が乱れます。
    <div id="blinds-cont">
    	<div id="blinds">
    	<img title="Description 0" alt="" src="photo1.jpg" />
    	<img title="Description 2" alt="" src="photo2.jpg" />
    	<img title="Description 3" alt="" src="photo3.jpg" />
    	<img title="Description 4" alt="" src="photo4.jpg" />
    	<img title="Description 1" alt="" src="photo5.jpg" />
    	</div>
    	</div>

カスタマイズ

サンプルはこちらを御覧ください。

  1. まず画像の枠となる背景画像を作成します。
    floom/bg.png
  2. floom/floom.cssのボックスの幅と高さを変更します。
    floom/floom.css
    変更した行の右には元の値をコメントアウトしています。
  3. screen.cssはこのページ設置用に変更しています。

ページトップに戻る