LoginSignup
0
1

More than 3 years have passed since last update.

@YJ2222(裕司 増島)

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

Posted at

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

準備

当たり前ですが、以下の一次ソースは必須です。
・lightbox公式HP
・bxslider公式HP

今回はCDN方式で使うので以下も使用します。
・cdnjs

画像を使うので以下に貼っておきます。ご自由にお使いください。
modal1.jpg
modal2.jpg
modal3.jpg
slider1.jpg
slider2.jpg
slider3.jpg

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

【フォルダ階層】
フォルダ階層.png

【ファイル構成】
ファイル構成.png

【ベースコード】

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
@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
$(function(){
  console.log('OK');
});

bxSlider

スクリーンショット 2021-01-10 0.21.08.png

スクリーンショット 2021-01-10 0.25.27.png

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

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

スクリーンショット 2021-01-10 0.34.09.png

この時点でのコードは以下です。
※なんのCDNなのか、コメント付けておくとわかりやすいですよ。

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
<!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
$(function(){
  // bxslider
  $(document).ready(function(){
    $('.bxslider').bxSlider();
  });
});

画面は以下です。

スクリーンショット 2021-01-10 0.49.32.png

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

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

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

8f55dd89fbb821efd004e6c7533f95ff.gif

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

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

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

lightBox

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

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

CSSでレイアウト整える前に、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
@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

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

最後に

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

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


@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
$(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);
  });
});
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1