ここではjQueryプラグインLightbox2で画像を拡大する方法を紹介しています。

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

ダウンロードはこちら
http://lokeshdhakar.com/projects/lightbox2/

headで読み込み

<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>

必要なファイル
lightbox.css
jquery-1.11.0.min.js
lightbox.min.js
imgフォルダ
これ以外は削除しても大丈夫です。

body

1枚を拡大

<a href="imgsrc.jpg" rel="lightbox"><img src="imgsrc.jpg"></a>

aタグのrelにlightboxを指定してください。
aタグのhrefが大きく表示されるパスでimgタグのsrcが小さく表示するパスです。

グループとして拡大

<a href="imgsrc1.jpg" rel="lightbox[key]"><img src="imgsrc1.jpg"></a>
<a href="imgsrc2.jpg" rel="lightbox[key]"><img src="imgsrc2.jpg"></a>
<a href="imgsrc3.jpg" rel="lightbox[key]"><img src="imgsrc3.jpg"></a>

aタグのrelにlightboxの配列でキーを設定すれば同じキーで定義されているものがグループ表示で拡大されます。