ここではjQuery画像拡大プラグインのZoomを紹介していきます。
デモはこちら
https://office-goto.info/demo/zoom/
jQuery Zoomをダウンロード
http://www.jacklmoore.com/zoom
headで読み込み
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="zoom-master/jquery.zoom-min.js"></script>
jquery.zoom-min.jsまたはjquery.zoom.jsを読み込んでください。
CSS
<style type="text/css"> .zoom { display:inline-block; position: relative; } .zoom img { display: block; } .zoom img::selection { background-color: transparent; } #ex2 img:hover { cursor: url(grab.cur), default; } #ex2 img:active { cursor: url(grabbed.cur), default; } </style>
script
$(document).ready(function(){ $('#ex1').zoom(); $('#ex2').zoom({ on:'grab' }); $('#ex3').zoom({ on:'click' }); $('#ex4').zoom({ on:'toggle' }); });
マウスオーバー、ドラッグ、クリックを設定できます。
html
<span class="zoom" id="ex1"> <img src="img/daisy.jpg" width="555" height="320"> </span> <span class="zoom" id="ex2"> <img src="img/roxy.jpg" width="290" height="320"> </span> <span class="zoom" id="ex3"> <img src="img/daisy.jpg" width="555" height="320"> </span> <span class="zoom" id="ex4"> <img src="img/roxy.jpg" width="290" height="320"> </span>
spanタグでimgタグを囲みターゲット指定してください。