ある程度サイズがある画像を拡大・縮小(ズーム表示)してみます。
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
元は解像度の高い画像を用意する必要があるので、容量の高い画像を使用するときは表示速度が気になってきます。
※流用される場合は自己責任でお願いします。