[JS]画像をさまざまなアニメーションで拡大表示するスクリプト -imgZoom

フェードや回転を使ったスムーズなアニメーションで画像を拡大表示するスクリプトを紹介します。

デモのキャプチャ

imgZoom
デモ

[ad#ad-2]

imgZoomの主な特徴

  • lightbox風のインターフェイス(暗いオーバーレイ、次の画像へのスイッチ)
  • CSS/HTMLベースでのカスタマイズ
  • フェードや回転のアニメーションで画像を拡大
  • ズームイン、ズームアウトのAPIの提供
  • jQueryのプラグインとして動作する軽量(7KB)スクリプト

imgZoomの実装方法

外部ファイル

下記の3ファイルを外部ファイルとして記述します。

HTML

class名に「thumbnail」を記述し、拡大用の画像はa要素に指定します。
※class名は変更可能です。

JavaScript

HTMLで記述したclass名「thumbnail」を指定します。
※class名は変更可能です。

[ad#ad-2]

imgZoomのオプションとカスタマイズ

オプション

スクリプトのオプションでは、使用するclass名、アニメーションの時間、フェード時の不透明度、回転の有無、ローディング時の画像、オーバーレイの不透明度、titleによる説明文の表示などが設定できます。

カスタマイズ

拡大時に使用されているフレームはCSSベースでカスタマイズが可能です。フレームは下記のような構造になっています。

オプションやカスタマイズの詳細は下記ページを参照ください。
imgZoom Documentation

sponsors

top of page

©2018 coliss