okzoom-demo

【jQuery】画像を虫眼鏡でズームさせられるOKZoomプラグイン

2015.02.22   3124


大きい画像を載せて細部まで見てもらいたいけど、それだと画像が大きすぎてページデザインがおかしくなってしまう。でも細部まで見せたい…
特にECサイトなどでよく見かけるUIですよね。画像をマウスオーバーすると大きい画像になって商品の細かい部分まで見られるみたいなやつです。
今回はそんな画像ズーム系プラグインの中のOKZoomを紹介します。

OKZoomプラグインのオススメ/ポイント

  •   虫眼鏡風に画像を思いのままにズーム出来る
  •   画像にIDやクラスを指定して簡単に実装可能
  •   もちろん四角くズームも可能

OKZoomプラグインのデモ


OKZoomプラグインのページ


OKZoomプラグインの使い方

それではOKZoomプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<img id="okzoom" src="img/photo1.jpeg">

チェックポイント

画像に任意のIDを付ける。

CSSコード

<style type="text/css">
#okzoom {
    width:300px;
    box-shadow: 0 3px 5px #888;
}
</style>

チェックポイント

widthやhightを実際の画像より小さくするのがポイント

JavaScriptコード

<!-- jquery本体-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- okzoom本体-->
<script src='js/okzoom.min.js'></script>
<script>
$(function(){
    $('#okzoom').okzoom({
        width: 200,  // ルーペの幅
        height:200,  // ルーペの高さ
        round:true,  // ルーペの形
        border: "1px solid black", // ルーペのボーダー指定
        shadow: "0 0 5px #000"  // ルーペの影指定
    });
});
</script>

チェックポイント

ルーペのボーダーや影はお好みで設定してくださいね。

プラグインへ一言

現実世界では虫眼鏡は子供の時に黒い紙に太陽の光を集めてチリチリする時以来使ってないかも…

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております