画像ポップアップ実装

参考記事

index.html

<body>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/light      box.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascr     ipt"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/light.     box.min.js" type="text/javascript"></script>
</body>

body内に記述

index.html

<a href="sakura.jpg" data-lightbox="abc" data-title="桜写真拡大">
   <img src="sakura-thumbnail.jpg" alt="桜写真">
</a>

data-title="○○○"　は省略可能。拡大時に表示されるタイトル。
サムネイル画像　src="sakura-thumbnail.jpg"(img要素)
拡大時の画像　　href="sakura.jpg"(a要素)

data-lightbox="abc"　は属性。abc(グループ名)は必須！！ないとうまく表示しなかった。
複数画像がある場合、全て同じ属性名にしておけば、グルーピングできる