今日ご紹介する［Zoom SlideShow］は、スライドショーとズーム機能を兼ね備えた、ちょっと特殊な動きをするjQueryプラグインです。

公式のデモサイトは以下。

Zoom SlideShow : https://zoom-slideshow.vincidev.com

実際にサンプルを作ってみました。

オンズのサンプル : https://on-ze.com/demo/jquery-zoomslideshow/

サムネイルを使ってスライドを制御できて、なおかつメインエリアの画像にカーソルを合わせると、その部分が虫眼鏡のように拡大して表示されます。

使い方は以下。

必要なファイルをダウンロード

最初に必要なファイルをダウンロードしてきます。

GitHub : https://github.com/GurYN/zoom-slideshow

上記GitHubサイトから、「Clone or download」をクリックしてzipファイルをダウンロード。
解凍すると、HTML、CSS、JavaScriptと、画像データをすべて入手できます。

基本的にはこれらのファイルをそのままアップロードして、画像を入れ替えてリンク先を変更すれば事足ります。

HTMLとCSSの記述のポイント。

入手したHTMLファイルを見てみると、その中に<div id="zoom"></div>と記述されている箇所があると思います。

この要素が拡大する虫眼鏡に相当します。
デザインはスタイルシートに依存しているので、CSSで大きさを調整することが可能です。

またデフォルトの状態だと、メインエリアは「id=”view”」で、サムネイルは「id=”thumbs”」で指定されていることがわかります。
こちらもデザインはCSSを使って自由に変更可能です。

<div id="zoom"></div>

<div id="view">
	<img src="/images/sample-01.png" width="840" height="680">
</div>

<div id="thumbs">
	<div id="nav-left-thumbs"><</div>
	<div id="pics-thumbs">
		<img src="/images/sample-01.png" width="840" height="680">
		<img src="/images/sample-02.png" width="840" height="680">
		<img src="/images/sample-03.png" width="840" height="680">
		<img src="/images/sample-04.png" width="840" height="680">
	</div>
	<div id="nav-right-thumbs">></div>
</div>

比較的シンプルなマークアップできるのが嬉しいポイントですね。

オプション設定

オプションで指定できる項目は6つ。

  • thumbsContainer
  • prevContainer
  • nextContainer
  • zoomContainer
  • zoomLevel
  • loadMsg

「zoomLevel」では拡大する割合を指定することができます。
初期値は「2」で、数値を大きくすればその割合で画像が拡大されます。

「loadMsg」ではメインエリアでの画像読み込み中のメッセージを指定可能。

以上。
jQueryプラグイン「Zoom SlideShow」の紹介でした。

なかなか面白い挙動をするスライドショーですね。

利用する機会は限られるかもしれませんが、ギャラリーサイトなどでニッチなニーズに応えられそうです。

Zoom SlideShow : https://zoom-slideshow.vincidev.com

追記：
本プラグインですが、jQueryのヴァージョン「3」以降にはまだ対応していないようです。
ご利用の際は、プラグイン本体を書き換えるか、jQuery 2.0〜系を使う必要があるので注意が必要です。