[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion

滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。

zAccordion - A Horizontal Accordion Plugin for jQuery

上記ページのスライドは、跳ね返るバウンスのアニメーションになっています。

[ad#ad-2]

zAccordionのデモ

デモでは、最小限の機能を備えたものから、最大限に拡張したもの、ちょっと面白いものまでが揃っています。

zAccordion — A Barebones Example
最小限の機能だけを備えた、シンプルなデモ。

zAccordion — An Advanced Example
最大限に拡張したデモ、インフォメーションボックスや移行のエフェクトを使用しています。

zAccordion — An Inverted Accordion
スライドの重ね順を反転させたちょっと面白いデモ。

zAccordionの実装

HTML

アコーディオンの各パネルはリスト要素で実装します。

<ul id="featured">
	<li>
		<image src="/images/diner.jpg" width="600" height="310" alt="Old School Diner" />
	</li>
	<li>
		<image src="/images/pool.jpg" width="600" height="310" alt="Vintage Pool" />
	</li>
	<li>
		<image src="/images/gas.jpg" width="600" height="310" alt="Retro Gas Pump" />
	</li>
	<li>
		<image src="/images/car.jpg" width="600" height="310" alt="Old Car Steering Wheel" />
	</li>
</ul>

JavaScript

「jquery.js」と当スクリプトを外部ファイルとし、下記のスクリプトを記述します。
※下記はトップにあるデモの例です。

$(document).ready(function() {
	$("#featured").zAccordion({ 
		easing: "easeOutBounce",
		timeout: 5500,
		slideWidth: 600,
		width: 884,
		height: 310
	});
});

スクリプトのオプション

オプションでは、アコーディオンのサイズ、スライドのアニメーションなど、さまざまなカスタマイズが行えます。

timeout: 6000, /* Time between each slide (in ms) */
width: 960, /* Width of the container (in px) */
height: 340, /* Height of the container (in px) */
slideWidth: 660, /* Width of each slide (in px) */
slideHeight: 340, /* Height of each slide (in px) */
tabWidth: 100, /* Width of each slide's "tab" (when clicked it opens the slide) */
startingSlide: 0, /* Zero-based index of which slide should be displayed */
slideClass: "slide", /* Class of each slide */
slideOpenClass: "slide-open", /* Class of open slides */
slideClosedClass: "slide-closed", /* Class of closed slides */
slidePreviousClass: "slide-previous", /* Class of the slide that was previously open before a new one was triggered */
easing: null, /* Easing method */
speed: 1200, /* Speed of the slide transition (in ms) */
open: function() {}, /* Callback function for opening slide */
close: function() {}, /* Callback function for closing slides */
auto: true, /* Whether or not the slideshow should play automatically */
trigger: "click", /* Event type that will bind to the "tab" (click, mouseover, etc.) */
pause: true, /* Pause on hover */
click: function() {}, /* Function called on click */
invert: false, /* Whether or not to invert the slideshow, so the last slide stays in the same position, rather than the first slide */
afterBuild: function() {} /* Function called after the accordion is finished building */

[ad#ad-2]