【jQuery】画像ズームjQueryプラグインZoomIt

jQuery

ZoomIt - jQuery Zoom Plugin

March 9, 2017

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

Usage

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>

Options

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

Events

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

API

  1. enable()
  2. disable()

Example:

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

Latest Posts

Related Posts