プラグインを使用せずにJavaScript Lightbox効果

ライトボックスは素晴らしいです!私は、JQueryの日と考えで初めて彼らを見ていることを覚えています.
長年にわたって、私はそれがバニラJavaScriptといくつかのCSSで作られることを実現するために来ました.
だから今日、私はどのようにプラグインを使用せずに独自のイメージLightbox効果を構築する方法をお見せしたい!

A while ago, we did a vanilla javascript modal, which is quite similar but uses a different approach.

最後の結果は、このクールな効果です

HTML構造

我々は、アプリケーションのHTMLビルディングブロックをレイアウトを開始します.

<div class="container">
  <div class="col">
    <img src="https://images.unsplash.com/photo-1605347220242-04d3b97ceee9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" onClick="openLightbox(this)" />
  </div>
  <div class="col">
    <img src="https://images.unsplash.com/photo-1605306030698-6e966cc142b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" onClick="openLightbox(this)" />
  </div>
  <div class="col">
    <img src="https://images.unsplash.com/photo-1593642634402-b0eb5e2eebc9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" onClick="openLightbox(this)" />
  </div>
</div>

<!-- Actual Lightbox -->
<div id="lightbox" class="lightbox hidden">
  <div onClick="closeLightbox()" class="close">❌</div>
  <div class="lightbox-content">
    <img id="lightbox-image" />
  </div>
</div>

上部には、ユーザーが表示されるレイアウトが含まれます.この場合、3つの列を持つコンテナーがあります.
イメージはonClick関数を持ちます.(これを少しずつ作成します).
次に、下部には、実際のライトボックスがあります.
LightBoxの内部では、簡単な絵文字の電源を閉じたボタンをクリックします.
そして、ライトボックスの中にも、私たちがイメージを置くために使用する空のイメージを見ます.

This article does not focus on accessibility and is not optimized for that purpose

ライトボックスへのスタイリングの追加

いくつかの基本的なスタイリングを追加することによって、我々のアプリケーションを少し良くしましょう.
最初に我々は openLightbox to center our columnsを使用し、次に、画像をポップにするために境界線とボックスの影を追加します.

.container {
  display: flex;
  flex-wrap: wrap;
  background: url("https://images.unsplash.com/photo-1558051815-0f18e64e6280?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1949&q=80") no-repeat center center;
  background-position: cover;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
.container .col {
  width: 30%;
  margin: 1.6%;
}
.container .col img {
  cursor: pointer;
  border: 5px solid #fff;
  box-shadow: 0 0 1rem #aaaaaa;
  max-width: 100%;
  max-height: 100%;
}

我々のLightboxが行くように、我々はそれを全体のページの上にわたるために必要として、トップから始まっていて固定されます.

.lightbox {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
}

我々は、フェードインとフェードアウト効果をアニメーション化することができますので、不透明度と可視性を使用している.
では隠しクラスを追加しましょう.

.lightbox.hidden {
  opacity: 0;
  visibility: hidden;
}

そして、それを上にするために、我々はライトボックスの中でボタン、内容とイメージをスタイルします.

.lightbox .close {
  position: absolute;
  right: 2.5%;
  top: 2.5%;
  font-size: 2rem;
  cursor: pointer;
}
.lightbox-content {
  display: flex;
  margin: 5%;
  align-items: center;
  justify-content: center;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 100%;
  border: 5px solid #fff;
}

ジャバスクリプトライトボックス効果

JavaScriptには、すべてをフックし、それを動作させる部分です.
何が起こるか

イメージ上のユーザークリック.我々はLightboxイメージにそれを追加して、我々のLightbox

から隠しクラスを削除するためにイメージのSRCを得ます

ユーザーが閉じるボタンをクリックします.私たちはライトボックスに隠しクラスを追加します.

作業に必要な変数を定義しましょう.

const lightbox = document.getElementById('lightbox');
const lightboxHolder = document.getElementById('lightbox-image');

実際のLightbox要素とその中のイメージ要素を定義します.
LightBoxを表示する関数を作成しましょう.

openLightbox = (element) => {
  lightboxHolder.src = element.src;  lightbox.classList.remove("hidden");
};

待ってください.はい、ユーザーがクリックしたイメージのsrcを取得し、ライトボックスに追加します.
次に、隠されたクラスを削除し、ユーザーが私たちのライトボックスを見て!
今、私たちは近い機能を必要とします.

closeLightbox = () => lightbox.classList.add("hidden");

そして今、プラグインを使用せずに、完全に機能するライトボックスを持っています.
次のcodepenでこのライトボックスを試すことができます.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook