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+
  • このエントリーをはてなブックマークに追加

関連記事

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

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

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

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

Comment

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑