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+
関連記事
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
- PREV
- パス定数と変更方法やURLの取得
- NEXT
- Syslogログエンジン
Comment
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」 https://t.co/ZajpInQSl0
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」 http://t.co/AdCzaZkik0