jquery.fs.zoomer.jsを使って画像を拡大・縮小（ズーム表示）する方法｜DAD UNION

jquery.fs.zoomer.jsを使って縦・横サイズが大きい画像を拡大・縮小（ズーム表示）する方法をご紹介します。

Contents

使用した画像
jquery.fs.zoomer.jsを使って画像を拡大・縮小（ズーム表示）するCSSの記述
jquery.fs.zoomer.jsを使って画像を拡大・縮小（ズーム表示）するHTMLの記述
jquery.fs.zoomer.jsを使って画像を拡大・縮小（ズーム表示）するJavaScriptの記述
jquery.fs.zoomer.jsを使用して画像を拡大・縮小デモページ

使用した画像

※横644px×縦828pxのjpg画像を使用しました。

ズーム（拡大・縮小）用の画像

jquery.fs.zoomer.jsを使って画像を拡大・縮小（ズーム表示）するCSSの記述

※jquery.fs.zoomer.cssファイルを読み込みます。以下は必要に応じて変更して下さい。

<style type="text/css">
<!--
.zoomer_wrapper{
	border: 1px solid #ddd;
	border-radius: 3px;
	height: 500px;
	margin: 10px 0;
	overflow: hidden;
	width: 100%;
}
.zoomer.dark_zoomer{
	background: #333 url(zoomer-bg-dark.png) repeat center;
}
.zoomer.dark_zoomer img{
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
-->
</style>
<link href="jquery.fs.zoomer.css" rel="stylesheet" type="text/css" media="all">

jquery.fs.zoomer.jsを使って画像を拡大・縮小（ズーム表示）するHTMLの記述

※拡大・縮小する画像（class=”zoomer_wrapper zoomer_basic”）を用意します。

<h1>「+」「-」をクリックすると画像が拡大・縮小（ズーム）します。</h1>


    


<div class="zoomer_wrapper zoomer_basic">
        <img src="i01.jpg" alt="ズーム（拡大・縮小）用の画像">
</div>

jquery.fs.zoomer.jsを使って画像を拡大・縮小（ズーム表示）するJavaScriptの記述

※jqueryとjquery.fs.zoomer.jsを読み込み拡大・縮小する画像を設定したエリア（.zoomer_basic）に$(“.zoomer_basic”).zoomer()と記述します。

<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.fs.zoomer.js"></script>
<script>
$(document).ready(function() {
	$(".zoomer_basic").zoomer();
});
</script>