Zoom SlideShow

JavaScript

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

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

Zoom SlideShow

デモ

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

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

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

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

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

Zoom SlideShow

関連記事

  1. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  2. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  3. Inspiration for Menu Hover Effects
  4. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  5. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  6. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP