【ZooMove】マウスオーバー時に画像の拡大が簡単にできるjQuery

こんにちは、ハル@haru_elpisです。

マウスオーバーで画像を拡大させてみせることができるjQueryプラグインの紹介です。

ZooMoveとは

画像の一部を詳細に見せたいときに拡大をしてくれるjQueryです。ZooMoveを使用すれば、拡大させる動きも滑らかで、ストレスなく見せることが可能となります。

ダウンロード

下部にある「DOWNLOAD ZOOMOVE」というボタンから一式ダウンロードします。

https://github.com/thompsonemerson/zoomove/archive/master.zip

github.com

ダウンロードした「zoomove.min.css」・「zoomove.min.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

< rel="stylesheet" href="css/zoomove.min.css">
<script src="js/zoomove.min.js"></script>

HTML

<figure 
	class="zoo-item" 
	zoo-image="[img/example.jpg]"
	zoo-scale="[2]" <!--拡大させる倍率-->
	zoo-move="[true]" <!--拡大画像の動かす-->
	zoo-over="[true]" <!--マウスオバー時に画像の大きさも拡大させる-->
>
</figure>

JavaScript

<script>
   $('.zoo-item').ZooMove();
</script>

まとめ

ZooMoveを使用すれば、とても簡単に拡大ができるようになります。一人ひとりの表情まで確認ができて、思い出の一枚がより鮮明によみがえりそうですね。

おわりっ