画像をクリックするとポップアップ表示するjQuery

画像をクリックすると大きく表示させたい

こうした悩みを解決します。

対応方法としてはjQueryと呼ばれるjavascriptのライブラリを使用します。
下記ページにて丁寧に解説されていますので、参照ください。

ざっと説明すると、

<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>

これをheader.phpの</header>直前にコピペする。

つづいて、ポップアップさせたい画像のhtmlをaタグで囲む。
このときの記述は下記のようにする。

<a href="画像URL" data-lightbox="group">
　　<img src="画像URL">
</a>

これでポップアップします。参考に下記の画像をポップアップさせてみます。