Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。
ダウンロード *黄色ボタン | 本家サンプル

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<script src="zoomsl-3.0.min.js" type="text/javascript"></script>

実装

<img class="img1208" src="表示画像"  data-large="ズーム表示画像" title="キャプション">

<script>
jQuery(function(){
$(".img1208").imagezoomsl({
//  オプション
    zoomrange: [1, 10],        // ズーム倍率[最小倍率,最大倍率] - (デ) [2,2]
//  zoomstart:                 // 初期ズーム倍率 - (デ) 2
//  descarea: ".zoomed1208"    // "要素"を指定
//  magnifierpos: "left",      // 拡大画像の表示位置 - (デ) "right"
//  インナーズーム(どちらか)
//  innerzoom: true,           // 全体をズーム - (デ) false
//  innerzoommagnifier: true   // フォーカス部分をズーム - (デ) false
});
});
</script>

上記オプションはシンプルに作成できるレベルのものだけ挙げています。その他オプションは、こちら (ロシア語ですが)

**ポイント

  • ズーム画像を表示する要素はdescareaオプションで指定することができます。指定なしの場合はデフォルトでは右側に表示され、magnifierposオプションで左側に表示することも可能です。
  • スクロールでズームイン・ズームアウトできる倍率の設定はzoomrangeで倍率範囲を、zoomstartで初期の倍率を設定できます。
  • インナーズーム - 全体をズームするinnerzoomとフォーカス部分をズームするinnerzoommagnifierのどちらかをtrue指定することで表示画像上でズームが可能になります。

デモ

サイトより
FF2+ IE8+ Opr9+ Chr1+ Saf2+
  • このエントリーをはてなブックマークに追加

関連記事

実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

no image

テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

no image

「jqPlot」を使って棒グラフを作成

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑