jQuery

【jQuery】 マウスオーバーなどで画像を拡大表示(ズーム)してくれる jQuery Zoom

jquery-zoom

今回は、実装もとても簡単なマウスオーバーやクリックで画像を拡大表示させてくれる【jQuery Zoom】のご紹介です。
拡大時のイベントのタイプも4種類ほどありますので、利用に合わせて変更が出来ます。
また、画像拡大の比率も調整可能となっています。
ネットショップの商品画像の拡大やスペースを確保したいけど大きい画像も表示させたい場合などに役に立つ【jQueryプラグイン】ではないでしょうか?
動作デモサイトもありますので、ご参考にどうぞ

動作デモサイト

jQuery Zoomのファイル一式は、下記リンク先よりお願い致します。

jQuery Zomm ダウンロード

jQuery Zoom 実装方法

それでは【jQuery Zoom】の実装方法を記載していきます。

必要ファイルの読み込み

まずは、head内にjQuery本体とダウンロードしたファイルの中にあるjsファイルを読み込みます。
ファイルの階層などは、ご自身に合わせて下さい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="jquery.zoom.min.js"></script>

jQuery

次にid名またはclass名で拡大表示させたい要素を指定します。
今回は、要素名に#zoom1と名づけています。

	<script>
		$(document).ready(function(){
			$('#zoom1').zoom();
		});
	</script>

HTML

次にHTMLの準備をしていきます。
htmlでは、拡大表示させたい画像を、div・li・spanなどで囲みます。
先ほど指定したid名zoom1をspanに記載します。

<span class='zoom' id='zoom1'><img src="01.jpg" width='960'></span>

CSS

最後にCSSでスタイルを調整していきます。

<style>
.zoom {
	display:inline-block;
	position: relative;
	}
.zoom img {
	display: block;
	}
</style>

上記までのコードを記載すれば、実装完了となります。
特に迷うこともなく実装できると思いますので、機会があれば実装してみてはいかがでしょうか?
それと、言うほどでもありませんが拡大させる画像は必ず元画像よりも小さく表示させて下さい。

動作デモサイト

jQuery Zoom オプション

最後に【jQuery Zoom】のオプションを少しだけ書いて終わりたいと思います。

拡大表示時のイベントタイプ変更

jQuery Zoomのデフォルトでは、マウスオーバーで拡大表示されますが、clickやtoggleなどに変更も可能となっております。
下記コードをご参照下さい。

	<script>
		$(document).ready(function(){
			$('#ex1').zoom();
			$('#ex2').zoom({ on:'grab' });
			$('#ex3').zoom({ on:'click' });			 
			$('#ex4').zoom({ on:'toggle' });
		});
	</script>

拡大比率の変更

デフォルトでは、【1】となっております。
こちらのオプションで、見やすい拡大表示が可能となっております。
下記コードをご参照下さい。

	<script>
		$(document).ready(function(){
			$('#zoom1').zoom({
			magnify:'0.5' //zoom時の拡大比率 | Default = 1
			}); 
		});
	</script>

オススメ書籍・アイテム

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS grunge-gradient

【PSD】グランジテクスチャにグラデーションを組み合わせた PSDセット

NEXT webtreats-grunge-stripes-preview

【PhotoShop】 グランジテイストのストライプ柄パターン