JavaScript

jquery.fs.zoomer.jsを使って画像を拡大・縮小(ズーム表示)する方法

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

使用した画像

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

ズーム(拡大・縮小)用の画像

画像を拡大・縮小する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">

画像を拡大・縮小するHTMLの記述

※拡大・縮小する画像を設定します。

<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>

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

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

ソース元:Zoomer Formstone / Ben Plum

元は解像度の高い画像を用意することになり、容量の高い画像を使用すると表示速度が遅くならない様に気を付ける必要があります。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。