画像をフェードインアウトで切り替えるスライドショーは定番ですが、それに「ズーム」というアクションを加えたスライドショーが簡単に実装できる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。