jquery.fs.zoomer.js:解像度の高い画像を拡大、縮小表示するJs



比較的解像度の高い画像をボタンクリックで拡大・縮小してみます。

1.読込むCSSファイルとCSSの記述例

<style>
.zoomer_wrapper{
	border-radius: 3px;
	height: 400px;
	margin: 10px auto;
	overflow: hidden;
	width: 600px;
}
.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" />

2.読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.fs.zoomer.js"></script>
<script>
$(document).ready(function() {
	$(".clZoomer").zoomer();
});
</script>

3.HTMLの記述例

    <div class="zoomer_wrapper clZoomer">
        <img src="cap1.jpg" alt="ズーム用のサイトキャプチャー画像" />
    </div>

jquery.fs.zoomer.js:解像度の高い画像を拡大、縮小表示するデモ

ソース元:Zoomer  /  Formstone  /  Ben Plum

他にもオプションがある様で拡大・縮小系って
他にも色々プラグインがあると思いますが、
画像自体に何かプラスアルファで何か出来る仕組みがあると良いですね。