ここでは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タグを囲みターゲット指定してください。