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+
関連記事
-
-
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを
- PREV
- パス定数と変更方法やURLの取得
- NEXT
- Syslogログエンジン
Comment
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」 https://t.co/ZajpInQSl0
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」 http://t.co/AdCzaZkik0