• マウスオンしたら…img01
  • ドラッグしたら…img02
  • クリック&ムーブしたら…img03
  • クリックしたら…img04

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.zoom.min.js"></script>
<script>
	$(window).load(function(){
		$('#ZoomDemo li:nth-of-type(1) span:nth-of-type(2)').zoom();
		$('#ZoomDemo li:nth-of-type(2) span:nth-of-type(2)').zoom({on: 'grab'});
		$('#ZoomDemo li:nth-of-type(3) span:nth-of-type(2)').zoom({on: 'click'});
		$('#ZoomDemo li:nth-of-type(4) span:nth-of-type(2)').zoom({on: 'toggle'});
	});
</script>

//オプション一覧
url: false,
callback: false,
target: false,
duration: 120,
on: 'mouseover', // other options: grab, click, toggle
touch: true, // enables a touch fallback
onZoomIn: false,
onZoomOut: false,
magnify: 1
<ul id="ZoomDemo">
	<li><span>マウスオンしたら...</span><span><img src="<PATH>/imgb11.jpg" alt="img01" width="400" /></span></li>
	<li><span>ドラッグしたら...</span><span><img src="<PATH>/imgb10.jpg" alt="img02" width="400" /></span></li>
	<li><span>クリック&ムーブしたら...</span><span><img src="<PATH>/imgb09.jpg" alt="img03" width="400" /></span></li>
	<li><span>クリックしたら...</span><span><img src="<PATH>/imgb08.jpg" alt="img04" width="400" /></span></li>
</ul>

Zoomについて

Zoomは、ドラッグやマウスオーバーでその場で画像を拡大できるプラグインです。
シンプルですが、効果的なプラグインです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • loupe

    loupe

    画像をルーペで見たように拡大できる

  • ImageLens

    ImageLens

    画像を虫眼鏡で見ているように拡大することができる

  • Captions

    Captions

    画像のキャプションを表示してくれる

  • FeaturedImageZoomer

    FeaturedImageZoomer

    画像上をマウス移動することで拡大画像を見ることができる

  • jQZoom

    jQZoom

    色々な方法で拡大画像を表示できる