jqueryプラグインの導入からオプションの設定方法まで。

自分への備忘録としてbxsliderとlightboxの導入からオプション設定までをまとめてみました。
おまけでドロワーメニューも書いてます。是非参考に。

## 準備
当たり前ですが、以下の一次ソースは必須です。
・[lightbox公式HP](https://lokeshdhakar.com/projects/lightbox2/#options)
・[bxslider公式HP](https://bxslider.com/)

今回はCDN方式で使うので以下も使用します。
・[cdnjs](https://cdnjs.com/)

画像を使うので以下に貼っておきます。ご自由にお使いください。
![modal1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/a0126e4d-9003-2823-fe5d-7d864695bd93.jpeg)
![modal2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/862a0c94-ec0c-ccba-da52-4e174028c0be.jpeg)
![modal3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/b10862a4-0007-3b1d-bce6-4f22ccf0f595.jpeg)
![slider1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/5189fbaf-dcdd-8d57-cca6-c9faa612d25e.jpeg)
![slider2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/51858e33-fdd5-8842-f0d0-f7c97675040a.jpeg)
![slider3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/566541be-5b44-cd92-3516-d97ec04ba56b.jpeg)

## ベースコードとフォルダ階層

【フォルダ階層】
![フォルダ階層.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/c6112a2a-4374-f4a9-d30f-ea455abdc533.png)

【ファイル構成】
![ファイル構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/71cdbee4-c8aa-7c03-c18c-c9033181d0c3.png)

【ベースコード】

```html:html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Template</title>
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

  <!-- JQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <!-- JS -->
  <script src="./js/main.js"></script> 
</body>
</html>
```

```css:css
@charset "UTF-8";
/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}
/* common
----------------------------------- */
.container{
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 10px;
}
/* media query
----------------------------------- */
@media screen and (max-width: 767px){
}
@media screen and (max-width: 629px){
}
```

```js:js
$(function(){
  console.log('OK');
});
```

## bxSlider

![スクリーンショット 2021-01-10 0.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/20b30287-01ec-e322-9340-5584f6413e36.png)

![スクリーンショット 2021-01-10 0.25.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/9d3fd43e-794d-0d89-6cc9-1922856910c0.png)

これでコピーできたのでHTMLの`scriptタグsrc内`に貼り付け。
<font color="red">**※JQuery CDNの下かつ、オリジナルのJSの上に記載する事。**</font>

同様にCSSも貼り付けていきます。

![スクリーンショット 2021-01-10 0.34.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/86c2f825-e25b-4079-e3d9-0c1ef01eda7c.png)

この時点でのコードは以下です。
<font color="red">**※なんのCDNなのか、コメント付けておくとわかりやすいですよ。**</font>

```html:html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Template</title>
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <!-- bxslider -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
  <!-- CSS -->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

  <!-- JQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <!-- bxslider -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <!-- JS -->
  <script src="./js/main.js"></script> 
</body>
</html>
```

早速スライダー実装します。
公式HPに飛びましょう。トップページから「Examples」に飛ぶと例が書いてあるので参考にしましょう。
コードは以下になります。

```html:html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Template</title>
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <!-- bxslider -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
  <!-- CSS -->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

  <!-- bxslider -->
  <ul class="bxslider">
    <li><img src="./img/slider1.jpg"></li>
    <li><img src="./img/slider2.jpg"></li>
    <li><img src="./img/slider3.jpg"></li>
  </ul>

  <!-- JQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <!-- bxslider -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <!-- JS -->
  <script src="./js/main.js"></script> 
</body>
</html>
```

```js:js
$(function(){
  // bxslider
  $(document).ready(function(){
    $('.bxslider').bxSlider();
  });
});
```

画面は以下です。

![スクリーンショット 2021-01-10 0.49.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/c3f8f390-e887-9bf2-7406-6b66afc5630f.png)

この時点では、自動実行されないただのスライダーなのでオプションを書いていきます。
その他使いそうなオプションも追加してます。

```js:js
$(function(){
  // bxslider
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      auto: true, // オートスライド
      mode: 'fade', // horizontal / vertical / fade 
      speed: 3000, // 遷移スピード
      pause: 10000, // スライド間隔
    });
  });
});
```

今回の場合以下のようにゆーっくり自動実行されればOKです。

![8f55dd89fbb821efd004e6c7533f95ff.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/cd3095fd-6430-7c39-76d7-348c00bc1024.gif)

次にCSSのオプションも書いていきます。
実はよーく見ると周りに5pxの余白とborder、shadowがかかってます。
実際にデベロッパーで見るとわかります。
なのでこれを解除するコードを書いていきます。

```css:css
@charset "UTF-8";
/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}
/* common
----------------------------------- */
.container{
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 10px;
}
/* bxslider
------------------------------------ */
/* スライダーの枠線を消す */
.bx-wrapper {
  background-color: transparent;
  margin: 0px auto 50px;
  border: none;
  box-shadow: none;
}
.bx-wrapper img {
  display: block;
  margin: 0px auto;
}
/* media query
----------------------------------- */
@media screen and (max-width: 767px){
}
@media screen and (max-width: 629px){
}
```

これで画面いっぱいいっぱいになったはずです。

![スクリーンショット 2021-01-10 1.03.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/a1a0a81c-d0f8-2bd9-d40d-2d78bb03fa8a.png)

こんな感じで、元々かかってるCSSを後から上書きできます。

## lightBox

bxSlider同様、`cdnjs`からCDNをコピペしましょう。検索キーワードは`lightBox`でOKです。
最終的なコードは以下になります。

```html:html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Template</title>
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <!-- bxslider -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
  <!-- lightBox -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
  <!-- CSS -->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

  <!-- bxslider -->
  <ul class="bxslider">
    <li><img src="./img/slider1.jpg"></li>
    <li><img src="./img/slider2.jpg"></li>
    <li><img src="./img/slider3.jpg"></li>
  </ul>

  <!-- JQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <!-- bxslider -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <!-- lightBox -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
  <!-- JS -->
  <script src="./js/main.js"></script> 
</body>
</html>
```

こちらも公式を参考にしましょう。
「INITIALIZE WITH HTML」の部分にサンプルがあるので自分用のコードに変換して使います。

```html:html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Template</title>
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <!-- bxslider -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
  <!-- lightBox -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
  <!-- CSS -->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

  <!-- bxslider -->
  <ul class="bxslider">
    <li><img src="./img/slider1.jpg"></li>
    <li><img src="./img/slider2.jpg"></li>
    <li><img src="./img/slider3.jpg"></li>
  </ul>
  
  <!-- main -->
  <main>
    <div class="container">
      <!-- thumbnail -->
      <div class="box"><a href="img/modal1.jpg" data-lightbox="img1" data-title="サムネイル1"><img src="./img/modal1.jpg"></a></div>
      <div class="box"><a href="img/modal2.jpg" data-lightbox="img1" data-title="サムネイル2"><img src="./img/modal2.jpg"></a></div>
      <div class="box"><a href="img/modal3.jpg" data-lightbox="img1" data-title="サムネイル3"><img src="./img/modal3.jpg"></a></div>
    </div>
  </main><!-- /main -->

  <!-- JQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <!-- bxslider -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <!-- lightBox -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
  <!-- JS -->
  <script src="./js/main.js"></script> 
</body>
</html>
```

補足として`data-lightbox`でグループ分けできます。=以降に同じ名前を設定しておくと、モーダル上でスライドが可能になります。
今回は全部グループ化したので、実際に画面でみていきます。

![acb323f9e118ad3afa851be9994a296f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/96f36b28-523e-e853-7886-b3fcbc33291d.gif)

CSSでレイアウト整える前に、JSのオプションを書いていきます。
現状モーダル出現時にスクロールが可能になっているのですが、基本的にはモーダルウインドウはスクロールしないのが多いのでその設定をします。
ついでにモーダルの出現時間などもちょっと変えていきます。

```js:js
$(function(){
  // bxslider
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      auto: true, // オートスライド
      mode: 'fade', // horizontal / vertical / fade 
      speed: 3000, // 遷移スピード
      pause: 10000, // スライド間隔
    });
  });
  // lightBox
  lightbox.option({
    disableScrolling: true, // モーダルアクティブ時はスクロール禁止
    fadeDuration: 100, // 背景フェードの時間、デフォは600
    imageFadeDuration: 3000, // 画像フェードの時間、デフォは600
  })
});
```

これでスクロールできなくなって、画面の出現時間も気持ち遅くなりました。
今度はCSSのオプションを書いていきます。
現状真っ黒な背景になっているので、色を変えます。

```css:css
@charset "UTF-8";
/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}
/* common
----------------------------------- */
.container{
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 10px;
}
/* bxslider
------------------------------------ */
/* スライダーの枠線を消す */
.bx-wrapper {
  background-color: transparent;
  margin: 0px auto 50px;
  border: none;
  box-shadow: none;
}
.bx-wrapper img {
  display: block;
  margin: 0px auto;
}
/* lightBox
------------------------------------ */
.lightboxOverlay{
  background: linear-gradient(45deg, red, blue, green, yellow, orange);
  opacity: 0.5;
}
/* media query
----------------------------------- */
@media screen and (max-width: 767px){
}
@media screen and (max-width: 629px){
}
```

![53f8953f7866683610f4ea103319289f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/0c0fb3ef-11f7-1f1f-d45f-3434c75099aa.gif)

このように背景色が変わればOKです。

## 最後に
今回はJQのプラグイン2つの導入からオプションまでを紹介しました。
最後におまけとして、ドロワーメニューを含めた完成形のコードを載せときますので是非参考にしてください。

```html:html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Template</title>
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <!-- lightBox -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
  <!-- bxslider -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
  <!-- CSS -->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- header -->
  <header>
    <div class="container">
      <h1>HEADER</h1>
      <div class="spbtn"><p>MENU</p></div>
    </div>
  </header><!-- /header -->
  <!-- navigation -->
  <nav>
    <ul class="container">
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
    </ul>
  </nav>
  <!-- slider -->
  <div class="container">
    <ul class="bxslider">
      <li><img src="./img/slider1.jpg"></li>
      <li><img src="./img/slider2.jpg"></li>
      <li><img src="./img/slider3.jpg"></li>
    </ul>
  </div><!-- slider -->
  <!-- main -->
  <main>
    <div class="container">
      <!-- thumbnail -->
      <div class="box"><a href="img/modal1.jpg" data-lightbox="img1" data-title="サムネイル1"><img src="./img/modal1.jpg"></a></div>
      <div class="box"><a href="img/modal2.jpg" data-lightbox="img1" data-title="サムネイル2"><img src="./img/modal2.jpg"></a></div>
      <div class="box"><a href="img/modal3.jpg" data-lightbox="img1" data-title="サムネイル3"><img src="./img/modal3.jpg"></a></div>
    </div>
  </main><!-- /main -->
  <!-- footer -->
  <footer>
    <div class="container">
      <p>FOTTER</p>
    </div>
  </footer><!-- /footer -->
  <!-- JQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <!-- lightBox -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
  <!-- bxslider -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <!-- JS -->
  <script src="./js/main.js"></script> 
</body>
</html>
```

```css:css


@charset "UTF-8";
/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}
/* common
----------------------------------- */
.container{
  max-width: 1230px;
  margin: 0 auto;
}
/* header
----------------------------------- */
header, footer{
  padding: 10px;
  background: #ff8383;
  color: #fff;
  text-align: center;
}
.spbtn{
  display: none;
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 3px;
  transition: .5s;
  position: absolute;
  right: 10px;
  top: 5px;
}
.spbtn p{
  font-size: 16px;
  text-align: center;
  line-height: 48px;
}
.spbtn:hover{
  cursor: pointer;
  background: rgba(255, 255, 255, 0.8);
  color: #ff8383;
}
.spbtn.open{
  background: rgba(255, 255, 255, 0.8);
  color: #ff8383;
}
@media screen and (max-width: 767px){
  header{
    text-align: left;
  }
  .spbtn{
    display: block;
  }
}
/* navigation
----------------------------------- */
nav{
  background: #ffc14d;
}
nav ul{
  display: flex;
  justify-content: space-between;
}
nav li{
  width: 100%;
  border-right: 1px solid #fff;
}
nav li:first-child{
  border-left: 1px solid #fff;
}
nav a{
  display: block;
  line-height: 50px;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 767px){
  nav{
    position: relative;
    /* bxSliderが9999のため */
    z-index: 10000;
  }
  nav ul{
    display: block;
    position: fixed;
    left: 100%;
    z-index: 10000;
    width: 100%;
    transition: .5s;
  }
  nav ul.open{
    left: 0;
  }
  nav ul.container{
    padding: 0;
  }
  nav li{
    border: none;
    border-bottom: 1px solid #fff;
    background: #ffc14d;
  }
}
/* main
----------------------------------- */
main{
  padding: 50px 10px;
  background: #ffffb8;
}
main .container{
  display: flex;
}
/* thumbnail */
div.box{
  margin-right: 10px;
}
@media screen and (min-width: 768px){
  div.box:last-child{
    margin-right: 0;
  }
}
div.box img{
  box-shadow: 5px 5px 5px #999;
}
@media screen and (min-width: 630px) and (max-width: 767px){
  main .container{
    flex-wrap: wrap;
  }
  div.box{
    width: calc(50% - 5px);
    margin-bottom: 10px;
  }
  div.box:nth-child(2n){
    margin-right: 0;
  }
}
@media screen and (max-width: 629px){
  main .container{
    display: block;
  }
  div.box{
    width: 300px;
    margin: 0 auto 10px;
  }
}
/* bxslider
------------------------------------ */
/* スライダーの枠線を消す */
.bx-wrapper {
  background-color: transparent;
  margin: 0px auto 50px;
  border: none;
  box-shadow: none;
}
.bx-wrapper img {
  display: block;
  margin: 0px auto;
}
/* lightBox
------------------------------------ */
.lightboxOverlay{
  background: linear-gradient(45deg,red, blue, green, yellow, orange);
  opacity: 0.5;
}
```

```js:js
$(function(){
  // bxslider
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      auto: true, // オートスライド
      mode: 'fade', // horizontal / vertical / fade 
      speed: 3000, // 遷移スピード
      pause: 10000, // スライド感覚
    });
  });
  // lightBox
  lightbox.option({
    disableScrolling: true, // モーダルアクティブ時はスクロール禁止
    fadeDuration: 100, // 背景フェードの時間、デフォは600
    imageFadeDuration: 3000, // 画像フェードの時間、デフォは600
  })
  // spbtn click event
  $('.spbtn').on('touchstart', function(){
    let opCls = 'open';
    $(this).toggleClass(opCls);
    if($(this).hasClass(opCls)){
      $(this).find('p').text('OPEN');
    } else {
      $(this).find('p').text('MENU');
    }
    $('nav ul.container').toggleClass(opCls);
  });
});
```