画像をフェードインアウトで切り替えるスライドショーは定番ですが、それに「ズーム」というアクションを加えたスライドショーが簡単に実装できるjQueryプラグイン「zoomslider」の使い方、設定方法について。

公式サイトからファイルをダウンロード

githubからファイル一式をダウンロードします。その中で必要なファイルは「dist」フォルダ内のjquery.zoomslider.min.jsとzoomslider.css、「demo/js」フォルダ内のmodernizr-*.*.*.min.jsです。

CSSとJSを読み込む

CSSとJSを読み込みます。

// cssファイルの読み込み
<link rel="stylesheet" href="zoomslider.css">

// jsファイルの読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="modernizr-2.6.2.min.js"></script>
<script src="jquery.zoomslider.min.js"></script>

HTMLを記述する

以下が基本コード。data-zs-src内に画像のパスをセットする。

<div id="js-slide" data-zs-src='["/img/01.jpg", "/img/02.jpg", "/img/03.jpg"]' data-zs-speed="8000" data-zs-switchSpeed="800" data-zs-interval="4500" data-zs-overlay="dots"></div>

CSSを設定する

#slide {
	overflow: hidden;
	width: 100%;
	height: 640px;
	position: relative;
}

設定できるオプションについて

data-zs-speed

ズーム速度。初期値は8000。数値が小さいほど早くズームする。

data-zs-switchSpeed

写真の切り替わる速度。初期値は800。数値が小さいほど早く切り替わる。

data-zs-interval

次の写真に切り替わるインターバル時間。初期値は4500。

data-zs-autoplay

自動ループの有無。初期値はtrue。自動ループをさせない場合はfalse。

data-zs-bullets

ページャーの有無。初期値はtrue。

data-zs-overlay

スライドにドットのマスクをかけるかどうか。初期値はplain(全体的に黒いフィルターがかけられたような効果)。ほかにもドットを掛けるdotsがある。マスク自体をかけないならfalse。