最近は高解像度な写真が増えたので、元の大きさのまま貼り付けてしまうと、閲覧に苦労するでしょう。かといって、見たい部分は拡大してみたいと思うはずです。この相反するニーズを解決するのがズーム機能です。 今回紹介するjs-image-zoomは外部ライブラリに依存しないJavaScript製の画像ズームライブラリです。

js-image-zoomの使い方

左が元の画像、ズームされている範囲が白くなっています。

ズームの大きさを変えられます。

ズームされたコンテンツの表示位置は上下左右を指定できます。

下に表示した場合です。

js-image-zoomはマウスオーバーでズームされた画像を表示します。そのためPCのWebブラウザ向けとなっています。外部ライブラリに依存しないので、どのようなフレームワークとも組み合わせて利用できるでしょう。

js-image-zoomはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

js-image-zoom Demo malaman/js-image-zoom: Image zoom on mouse hover for desktop browsers without external dependencies