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. Textualizer

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  2. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  3. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

  4. DateTime Picker

    JavaScript

    レスポンシブでフラットデザインの「DateTime Picker」

    DateTime Pickerはレスポンシブ対応のフラットデザインによ…

  5. Image Figure Caption effects
  6. Square Menu

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP