マウスホバーすると画像がズームされるJSプラグイン「drift」

インターネットショッピングサイト Amazonの商品ページでは、
商品画像にマウスホバー（マウスを載せる）すると商品のズーム画像が表示されます。

あの機能は商品が拡大されるので、TVやオーディオ機器のインターフェイスや
ノートPCであれば、USBの端子数のレイアウト等が確認出来て凄く便利ですよね。

今回はマウスホバーされると画像がズームされるJavascriptプラグイン「drift」の紹介です。

* 公式のサンプル画像

*上の画像はマウスカーソルが隠れてしまっていますが、マウスホバーして拡大されています

driftのインストール

インストールはこちら (github)からダウンロードする場合と、bowerにも対応しています。

bower install drift

サイトへの導入はDriftのjavascriptファイルを読み込むだけで完了です。

<script src="/static/bower_components/drift/dist/Drift.min.js"></script>

driftの使い方

Driftの使い方は簡単で第一引数に拡大する画像のセレクター、
第二引数に画像を展開する場所の要素を書くだけです。

マウスホバーされると、imgタグ内の"data-zoom"属性がズーム部分として表示されます。

<!-- 公式の最小限のサンプル -->
<img src="http://your-image.jpg?w=400" data-zoom="http://your-image.jpg?w=1200">

<p>ここに画像が展開</p>


<script type="text/javascript">
/* 下記のコードはimgタグをホバーされると、pタグにホバー部分を展開 */
new Drift(document.querySelector('img'), {
  paneContainer: document.querySelector('p')
});

</script>

上記の場合だと全てのimgタグがホバーされる度に動いてしまうので、もう少し実用的に使ってみましょう！

今回のDriftのテストの為に下記のシンプルなHTMLを用意しました。

<div id="drift-test" class="row">
  
  <div class="col-md-6">
    <!-- imgタグ内の"data-zoom"のURLが拡大される画像です -->
    <img class="img-responsive" id="someItem" src="http://i.imgur.com/LQi911q.jpg?w=200" 
　　　　　　data-zoom="http://i.imgur.com/LQi911q.jpg?w=800"/>
  </div>

  <div class="col-md-6">
    
    <!-- このidの要素に画像が展開されます  -->
    <div id="extract-image">
      <h1>ライブラリ名：Drift</h1>
      <h1>説明 1：ここに拡大画像が表示されます！</h1>
      <h1>説明 2：ここにimgタグ内のdata-zoomの画像が表示されます</h1>
      
    </div>
    
  </div>
  
</div>

上記のHTMLを表示( * テストの為、bootstrapを使っています )

次にjavascriptの部分です。今回はhoverイベントを使う為にjQueryを使用しました。

// id="someItem"がマウスホバーされた時の処理
$('#someItem').hover( function() {
  // id="someItem"の画像を指定しています
  new Drift(document.querySelector('#someItem'),
    {
    // id="extract-imageに拡大画像を表示"
    paneContainer: document.querySelector('#extract-image')
    }
  ); // END: Drift()
}); // END: hover()

driftを使ってzoomされました (スクリーンショットの関係でマウスカーソルは消えてます)