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

  • files
  • js
  • html
<link href="<PATH>/jquery.jqzoom.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.jqzoom-core-pack.js"></script>
<script>
	$(window).load(function(){
		$('#jQZoomDemo01').jqzoom({
			zoomHeight: 267
		});
		$('#jQZoomDemo02').jqzoom({
			zoomType: 'innerzoom'
		});
	});
</script>


//オプション一覧

zoomType: 'standard',
//innerzoom/standard/reverse/drag
zoomWidth: 300,
//zoomWindow  default width
zoomHeight: 300,
//zoomWindow  default height
xOffset: 10,
//zoomWindow x offset, can be negative(more on the left) or positive(more on the right)
yOffset: 0,
//zoomWindow y offset, can be negative(more on the left) or positive(more on the right)
position: "right",
//zoomWindow default position
preloadImages: true,
//image preload
preloadText: 'Loading zoom',
title: true,
lens: true,
imageOpacity: 0.4,
alwaysOn: false,
showEffect: 'show',
//show/fadein
hideEffect: 'hide',
//hide/fadeout
fadeinSpeed: 'slow',
//fast/slow/number
fadeoutSpeed: '2000' //fast/slow/number
<p><a href="<PATH>/imgb02.jpg" id="jQZoomDemo01" title="猫ちゃ~ん"><img src="<PATH>/imgb02.jpg" width="400" title="猫ちゃ~ん"></a></p>
<p><a href="<PATH>/imgb03.jpg" id="jQZoomDemo02" title="サンタちゃ~ん"><img src="<PATH>/imgb03.jpg" width="400" title="サンタちゃ~ん"></a></p> 

jQZoomについて

jQZoomは色々な方法で拡大画像を表示できるプラグインです。
その場で拡大、横に表示など色々と表示方法があるので自分好みの表示方法を選べます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスBSD
対応ブラウザ

関連するjQueryプラグイン

  • Zoom

    Zoom

    ドラッグやマウスオーバーでその場で画像を拡大できる

  • ImageScroller

    ImageScroller

    サムネイルをドラッグすることで大きな画像を見ることができる

  • loupe

    loupe

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

  • FeaturedImageZoomer

    FeaturedImageZoomer

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

  • LazyLoad

    LazyLoad

    ページ内の画像読み込みを遅延させる