インターネットショッピングサイト Amazonの商品ページでは、
商品画像にマウスホバー（マウスを載せる）すると商品のズーム画像が表示されます。
あの機能は商品が拡大されるので、TVやオーディオ機器のインターフェイスや
ノートPCであれば、USBの端子数のレイアウト等が確認出来て凄く便利ですよね。
今回はマウスホバーされると画像がズームされるJavascriptプラグイン「drift」の紹介です。
*上の画像はマウスカーソルが隠れてしまっていますが、マウスホバーして拡大されています
インストールはこちら (github)からダウンロードする場合と、bowerにも対応しています。
bower install drift
サイトへの導入はDriftのjavascriptファイルを読み込むだけで完了です。
<script src="/static/bower_components/drift/dist/Drift.min.js"></script>
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>
次に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を使うと短いコードで、画像の拡大表示させるイベントが簡単に行えます。
注意点としては、拡大させたい画像は解像度が高いもがいいので
画像のサイズがどうしても大きくなりそうです。
( 又は表示用と拡大用、二種類を使う )
ファッションブランドの商品ページを作成している人や、Tシャツ等のプリントを拡大表示させたり等など
使い所は沢山ありそうなのでゼヒ×2チェックしてみてください！
GitHub: imgix/drift
