Zoom SlideShow

JavaScript

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

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

Zoom SlideShow

デモ

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

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

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

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

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

Zoom SlideShow

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  2. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  3. EZ Tabs jQuery Plugin
  4. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  5. jQuery Waterwheel Carousel

    JavaScript

    水平や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Caro…

    水平方向や垂直方向に配置できる水車のような便利なカルーセル「jQuer…

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP