March 9, 2017

ZoomItは画像にシンプルで設定可能なダイナミックズーム機能を追加するjQueryプラグイン。

jQuery

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

ZoomIt (CSS / Script)

<link rel="stylesheet" media="all" href="dist/styles/zoomit.css" />
<script src="dist/scripts/jquery.zoomit.min.js"></script>

<img id="zoomit-target" src="/path/to/small.jpg" data-zoomed="/path/to/large.jpg" alt="Image To Zoom">

<script type="text/javascript">
$('#zoomit-target').zoomIt();
</script>

1. img
2. src
3. class

1. container
2. loaded
3. img
4. ghost

1. onZoomIn
2. onZoomOut
3. onClick
4. onInit

1. enable()
2. disable()

Example:

$('#zoomit-target').data('zoom').enable()