js-image-zoom
js-image-zoomはシンプルで使いやすい非依存型の画像拡大鏡スクリプトです。すごいシンプルで簡単、動作も軽量なので実用的な印象です。
画像は2つ用意する必要なく、CSSも殆ど必要ありません。HTMLも非常にシンプル、他スクリプトへの依存もなしと、とても使いやすいと思いました。
簡単に使い方をご紹介します。
<script src="https://unpkg.com/js-image-zoom@0.7.0/js-image-zoom.js" type="application/javascript"></script>
↑ 本体を読み込みます。上記例はCDNなので便宜変更してください。
var options = {
width: 400,
zoomWidth: 500,
offset: { vertical: 0, horizontal: 10 }
};
new ImageZoom(document.getElementById("img-container"), options);↑ セッティングです。要素の指定とかサイズとか拡大画像の位置を決めます。
<div id="img-container" style="width: 400px"> <img src="https://unsplash.it/1200/900"> </div>
画像を用意して完了です。単純に、大きなサイズの画像を小さいサイズで表示し、マウスホバーで元のサイズを表示する、みたいなやつ。
用途はECサイトが大半かもしれませんが何より簡単で使いやすくて既存のコンテンツにも導入できるので覚えておくとどこかでお世話になるかもですね。ライセンスはMIT。