LightBoxの作り方
プラグインを使用してlightbox（サムネイルの画像をクリックしたら画面が切り替わらずに、クリックしたサムネイルの大きな画像が出て来る）をつくる。
①下記のサイトへ飛んで、ダウンロードボタンをクリック。
lokeshdhakar.com
②zipデータを解凍する。使用するデータのみ抜き取る。使用するものは下記の通り。
CSSフォルダ
imagesフォルダ
jsフォルダ
- lightbox.js
③lightbox.cssファイルを＜heade＞＜/head＞の中、且つレイアウトのcssファイルの下に記述。
例 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Light Box</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/lightbox.css"> </head>
④lightbox.jsファイルを＜heade＞＜/head＞の中、且つjQueryファイルの下に記述。
例 : 〜省略〜 : <script src="js/jquery-1.12.1.min.js"></script> <script src="js/lightbox.js"></script> </body>
⑤HTMLファイルの中の画像（クリックしたら表示される大きい画像のリンク）の記述の後に data-lightbox="roadtrip" を入れる。こうすることで画像が拡大されたまま次の画像をスライドで見る事ができる。
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a> <a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a> <a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
