[MooTools] 左右からスライドインさせて表示する – Slidable Viewer

ID指定したエリア内にある要素を左右からスライドインさせて表示するクラス。
使い古されまくりな感じのものだけど、使う用事があったので適当に書いてみた。

XHTML

任意のID要素の下に画像をつらつら並べる。
オプションで子要素の種類を指定できるので、リストに入れたり段落に入れたりしてもよいし、
画像ではなくDIV要素などでもよい。

<div id="picture">
<img src="images/1.jpg" width="323" height="243" alt="" class="top" />
<img src="images/2.jpg" width="323" height="243" alt="" />
<img src="images/3.jpg" width="323" height="243" alt="" />
<img src="images/4.jpg" width="323" height="243" alt="" />
</div>
<div id="divs">
<div class="top"><p>1</p></div>
<div class="sec"><p>2</p></div>
<div class="thr"><p>3</p></div>
</div>

CSS

親要素にposition:relative、width、heightが必須で、
子要素にwidthが必須。画像以外の要素はCSSでwidthの指定をする。

#picture,
#divs{
	width:323px;
	height:243px;
	margin:50px auto;
	position:relative;
}

#divs div {
	width:323px;
	height:243px;
	text-align:center;
}
.top {background-color:#dda;}
.sec {background-color: #996;}
.thr {background:#C9F;}
#divs div p { color:#fff; font-family:Verdana, Geneva, sans-serif;line-height:243px;font-size:156%}

矢印のスタイル。スタイリングは全てCSSで。
面倒なのでデモはIE6対策とかしてません。

挿入されるソース：

<a href="#" class="next" title="Next">Next</a>
<a href="#" class="prev" title="Prev">Prev</a>

.next,
.prev {
	display:block;
	height:30px;
	width:30px;
	text-indent:-9898px;
	overflow:hidden;
	position:absolute;
	top:120px;
	z-index:100;
}
.next{
	right:-15px;
	background:url(images/next.png) no-repeat left top;
}

.prev {
	left:-15px;
	background:url(images/prev.png) no-repeat left top;
}

JavaScript

headなどでインスタンスを作成します。

<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
	new SlidableViewer();									 
	new SlidableViewer({id:"divs",get:"div",duration:1000,transition:Fx.Transitions.Elastic.easeOut});	
});
//]]>
</script>

Options

(タイプ/初期値)　hashで指定してください。

id

(string/”picture”) クラスを適用する要素のID

get

(string/”img”) スライドさせる子要素。タグ名とかクラス名とか

mainClass

(string/”top”)　初期表示させる要素が持つクラス名。他がdisplay:noneになる

duration

(string,number/500) トランジションの遅延

transition

(string,object/’expo:out’) スライド時のトランジション　Fx.Transitions

Download

“Slidable Viewer” をダウンロード

WTN_SlidableViewer.zip – 1305 回のダウンロード – 113.60 KB