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. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

  2. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  3. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  4. Bootstrap Dropdown Hover
  5. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  6. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

コメント

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

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

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP