jquery.fs.zoomer.jsを使用して画像を拡大・縮小（ズーム表示）してみる

ある程度サイズがある画像を拡大・縮小（ズーム表示）してみます。

1．使用した画像

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

2．読み込むCSSファイルと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">

3．読込むJsファイルとJavaScriptの記述例

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

4．HTMLの記述例

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


    


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

jquery.fs.zoomer.jsを使用して画像を拡大・縮小デモ

ソース元：Zoomer Formstone / Ben Plum

元は解像度の高い画像を用意する必要があるので、容量の高い画像を使用するときは表示速度が気になってきます。

※流用される場合は自己責任でお願いします。