ここでは画像拡大プラグインのjQuery fancyBoxの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/fancybox/

fancyBoxをダウンロード
http://fancyapps.com/fancybox/#license

headで読み込み

<link href="source/jquery.fancybox.css" rel="stylesheet" type="text/css">
<script src="lib/jquery-1.10.1.min.js"></script>
<script src="source/jquery.fancybox.pack.js"></script>

jquery.fancybox.css、jquery.fancybox.js(jquery.fancybox.pack.js)を読み込んでください。

パラメータの設定

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
            openSpeed  : 700,
            closeSpeed  : 700,
            openEffect : 'elastic',
            closeEffect : 'elastic'
        });
    });
</script>

設定できるパラメータ
http://fancyapps.com/fancybox/#docs

html

<a href="img1.jpg" data-fancybox-group="group" class="fancybox" title="1"><img src="thum/img1.jpg"></a>
<a href="img2.jpg" data-fancybox-group="group" class="fancybox" title="2"><img src="thum/img2.jpg"></a>

idやclassなどでターゲットを指定してください。
グループ化する場合はdata-fancybox-group=”group”を記述してください。