虫眼鏡機能を比べてみた #JavaScript

ECサイト制作で虫眼鏡機能を導入する機会があったので今回は
虫眼鏡機能のプラグインをいくつか比べてみました。

OKzoom.js

マウスオーバーでルーペ（虫眼鏡）みたいにズームできます。
比較的簡単に導入できるし使いやすいが、スマホの時の制御が難題
オプションもあり、デフォルトの虫眼鏡機能といったイメージ。

導入手順
JSファイル読み込み

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/okzoom.js"></script>

要素を指定。ルーペのサイズやスタイルを設定。

$(function(){
    $('#okzoom').okzoom({
        width: 250,  // ルーペの幅
        height:250,  // ルーペの高さ
        round:true,  // ルーペの形
        border: "1px solid black", // ルーペのボーダー指定
        shadow: "0 0 5px #ffffff"  // ルーペの影指定
    });
});

画像に任意のIDを付けます

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

Zoomple.js

こちらも導入は簡単だが大きな画像と通常の画像の2枚を用意しないといけない。
オプションでルーペのサイズやスタイルを変更可能。スマホの時の制御が面倒。

導入手順
JS、cssファイル読み込み

<link href="css/zoomple.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/zoomple.js"></script>

要素を指定。

$(document).ready(function() {
  $('.zoomple').zoomple({ 
    blankURL : 'images/blank.gif',
    loaderURL : 'images/loader.gif',
    offset : {x:-150,y:-150},
    zoomWidth : 300,  
    zoomHeight : 300,
    roundedCorners : true
  });
});

画像に任意のクラスを付けます。

<a href="img/img01.jpg" class="zoomple"><img src="img/img_min.jpg" alt="" /></a>

Drift.js

こちらも導入は簡単だが大きな画像と通常の画像の2枚を用意しないといけない。
しかしオプションが豊富でレイアウトも変更しやすい。

導入手順
JS、cssファイル読み込み
drift-basic.cssに拡大鏡（虫眼鏡）や、ローディング画像のレイアウトが設定されているので、
CSSを変更して、拡大鏡の形や、大きさを変更できます。

<link href="css/drift-basic.css"/ rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/Drift.js"></script>

要素を指定。

new Drift(document.querySelector('.img'), {
  paneContainer: document.querySelector('.detail'),
  zoomFactor: 3,
  inlinePane: 790,
  inlineOffsetY: -85,
  containInline: false
});

画像に任意のクラスを付けます。
"img/samll.jpg"には小さな画像を、data-zoom="img/large.jpg"には拡大した画像を指定します。

<div class="content">
  <img class="img" src="img/small.jpg" data-zoom="img/large.jpg">
  <div class="detail"></div>
</div>

3つとも簡単に導入できるので試しに入れてみてはどうでしょう。
使ってみた感じ、どれもメリット、デメリットがあるがオプションの豊富さ、レイアウトの変更のしやすいものが喜ばれるだろう。

アクセサリー、小物など商品を細部まで見せるユーザには嬉しい機能なので是非。