HTML中の画像をクリックでポップアップ表示する方法
プラグインLightBox2を使って，HTML中に表示したサムネイル画像をオンクリックでポップアップさせるようにした時の記録です．(2018.1月現在)
Lightbox2ダウンロード
以下のサイトに飛んで，ダウンロード． lightbox2-master.zipがダウンロードされる．
必要なファイルの格納orアップロード
lightbox2-master.zipを解凍すると，distフォルダの中に，css, js, imagesという3つのフォルダがあるので，それをhtmlファイルと同じ階層に格納orアップロードする． ちなみにexamples/index.htmlを開けばデモページが確認できる．なんかちょっと拡大が遅い...
headタグ内のコード編集
公式ページのgetting startedに沿ってhtmlのhead内に以下の処理を記述．
<link href="path/to/lightbox.css" rel="stylesheet"> <script src="path/to/lightbox.js"></script>
path/to/にはファイルまでのパスを入れてください． また，jQueryもロードする必要があります．
If you are not currently using jQuery, I've created a packaged file that includes both Lightbox and jQuery. Include dist/js/lightbox-plus-jquery.js instead of lightbox.js.
との記述があったので，以下のようにhead内に記述．この部分，バージョンに応じて変更されそうな気がするので注意してください．
<script src="js/lightbox-plus-jquery.js"></script>
画像表示のコード編集
<a id="myimg_pop" href="path to image" data-lightbox="xyz"/> <img src="path to image" name="myimg" width="300" alt=""> </a>
これで，aタグでポップアップ用の画像，imgタグでサムネイル用画像を表示することができます．
data-lightbox="xyz"
の""内は空白でなければなんでも良いようです． サムネイルとポップアップの画像に同じものを設定する場合，"path to image"には同じパスを記述してください．
その他
このサムネイル画像とポップアップ用画像をJavaScript側で制御したい時の処理については別途．
参考にさせていただいたページ． http://makasete-web.net/photo-pop-up
