JavaScript

軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズームさせる機能を実装することができます。軽量で使い方もシンプルなのが嬉しいですね。画像の上にマウスを乗せた部分が拡大されます。画像を細部まで確認できるようにしたい時に便利ですね。

[ads_center]

Leroy Zoomの使い方

Leroy Zoom

Leroy Zoom

画像は全部で、小・中・大の3種類を用意する必要があります。小の画像にマウスを乗せると、その部分の拡大画像が表示され、これが中の画像になります。さらにクリックすると、大の画像まで拡大されます。

使い方は、jQuery本体とプラグインファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="css/jquery.leroy-zoom.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.leroy-zoom.min.js"></script>

マークアップは以下のように記述します。aタグのdata-medium-urlには中の画像を、data-large-urlには大の画像を指定します。imgタグには小の画像を記述しておきます。

<a href="#" id="demo-trigger" data-medium-url="sample/medium.jpg" data-large-url="sample/large.jpg">
    <img src="sample/small.jpg" />
</a>

あとはLeroy Zoomを呼び出すだけです。

<script type="text/javascript">
$(document).ready(function() {
    $("#demo-trigger").leroyZoom({
        zoomTop: 200, // px単位で上からのズームフレームの距離
        zoomLeft: 560 // px単位で左からのズームフレームの距離
    });
});
</script>

ということで、画像を拡大表示させたい時に覚えておきたいjQueryプラグインですね。

Macのプレビューで複数ファイルをまとめて開くやり方Macのプレビューで別々に開かれる複数のファイルを一つにまとめて開くやり方前のページ

垂直・水平方向に文字が移動するアニメーションを実装できるjQueryプラグイン「funnyText.js」次のページfunnyText.js

関連記事

  1. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

  2. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  3. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  4. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

  5. Relocator
  6. no-image

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP