サムネイル画像をクリックしたとき、その場で拡大画像を表示させるjQueryです。
下記をhead部分に記載します。
<!-- =ightbox用ファイルとjQueryを読み込む記述= -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
<!-- =Lightboxでの拡大画像表示をカスタマイズするCSS= -->
<style type="text/css">
#lightbox .lb-container {padding: 0px; }
#lightbox .lb-outerContainer {padding: 2px;}
</style>
下記をhead部分に記載します。
<figure>
<a href="拡大画像URL" data-lightbox="lightbox" data-title=" "><img src="サムネイル画像URL" alt=" "><figcaption> </figcaption></a>
</figure>