トップ > ★jQuery > モーダルウィンドウ

モーダルウィンドウ

★jQuery

モーダルウィンドウ

lokeshdhakar.com

  • GitHubからダウンロード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Lightbox</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
<section class="examples-section">
  <div class="container">
    <h3>Four image set</h3>
    <ul class="image-set">
    <li><a class="example-image-link" href="img/画像ファイル名３" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名３" alt=""></a></li>
    <li><a class="example-image-link" href="img/画像ファイル名４" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名４" alt=""></a></li>
    <li><a class="example-image-link" href="img/画像ファイル名５" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名５" alt=""></a></li>
    <li><a class="example-image-link" href="img/画像ファイル名６" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名６" alt=""></a></li>
    </ul>
  </div><!-- /.container -->
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
カスタマイズ

背景の色を変更（デフォルトでは黒い部分）

  • lightbox.cssの一「.lightboxOverlay」のbackground-color: black;となっているところを任意の色に変更する
  • 背景色の不透明度は「opacity: 1.00;」で、透明度なし
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}


画像周りの色を変更（デフォルトでは白い部分）

  • .lb-outerContainerの「background-color」と「border-radius」で角の丸みと同時に指定する
  • 白が最もバランスがよい
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}


クリックされると、幅250px、高さ250pxの大きさ（初期値）から100％まで拡大される


解説文の文字色を変更（デフォルトでは#ccc）

.lb-data {
  padding: 0 4px;
  color: #FFF;
}


拡大スピードとフェード

  • 「lightbox.js」
  • １秒は「1000」で指定する
  • 「this.fadeDuration = 500;」と「this.resizeDuration = 700;」の数値を変更する
  var LightboxOptions = (function() {
    function LightboxOptions() {
      this.fadeDuration = 500;
      this.fitImagesInViewport = true;
      this.resizeDuration = 700;
      this.positionFromTop = 50;
      this.showImageNumberLabel = true;
      this.alwaysShowNavOnTouchDevices = false;
      this.wrapAround = false;
    }


その他のLightBox