Zoom SlideShow

JavaScript

カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

Zoom SlideShowは、カルーセルによるスライドショーとズーム機能を備えたjQueryプラグインです。メインエリアに表示された画像にマウスオーバーすると、その部分が虫眼鏡のようになり細部を拡大して見ることができます。スライドショーを楽しみつつ、気になる部分があれば拡大してチェックできるのでとても便利ですね。

Zoom SlideShow

デモ

デモではメインエリアに選択されている画像が大きく表示されています。この画像の上にマウスオーバーすることで、その部分を拡大して見ることが可能です。虫眼鏡のようなカーソルを動かすことで、好きな部分を瞬時に拡大することができます。

メインエリアの下にはサムネイル画像が並べられており、ここから選択した画像がメインエリアに表示されます。

また、サムネイル画像はカルーセルになっており、左右には前後移動する矢印ボタンが設置されています。

カルーセルによるスライドショーを楽しみながらも、好きな部分を拡大してチェックできるという楽しみ方もできるのがいいですね。

マークアップもスッキリしているほか、使い方もシンプルで分かりやすいと思います。オプションには、thumbsContainer、prevContainer、nextContainer、zoomContainer、zoomLevel、loadMsgという項目が用意されています。

Zoom SlideShow

no-imageタッチ対応のドロワーコンポーネント「hy-drawer」前のページ

JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」次のページjqTree

最近の記事

  1. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP