lightbox.jsの使い方を詳しく解説

lightbox.js は、Web ページ上の画像、ビデオ、または Web コンテンツのブラウジング効果を表示するために使用される、一般的に使用される JavaScript プラグインです。これは、視聴者がサムネイルまたはボタンをクリックして、フルサイズの画像またはメディアを表示するモーダルを開くためのシンプルかつエレガントな方法を提供します。この記事ではlightbox.jsの使い方を詳しく紹介します。

lightbox.jsのダウンロードと導入

lightbox.jsを利用するには、まず公式サイトから最新版のプラグインをダウンロードする必要があります。ダウンロードが完了したら、プラグイン ファイルをプロジェクトの JavaScript フォルダーにコピーします。次に、<script> タグを使用して、HTML ドキュメントの head セクションまたは script セクションに lightbox.js ファイルを導入します。 </script>

<script src="path-to-js/lightbox.js"></script>

画像サムネイルの作成

lightbox.js を使用するには、HTML ドキュメント内に画像サムネイルを作成する必要があります。通常、画像のサムネイルは タグを使用してラップされ、その href 属性はフルサイズの画像の URL を指します。さらに、lightbox.jsのトリガーを指定するdata属性も追加する必要があります。

<a href="path-to-images/image.jpg" data-lightbox="gallery"> <!-- 图像缩略图 -->
  <img src="/static/imghwm/default1.png"  data-src="path-to-thumbnails/thumbnail.jpg"  class="lazy"   alt="Thumbnail">
</a>

上の例では、data-lightbox 属性が「gallery」に設定されています。これは、画像が同じギャラリーに表示され、左右の矢印で画像を切り替えることができることを意味します。

JavaScript を使用して lightbox.js を初期化する

画像のサムネイルが作成されたら、JavaScript を使用して lightbox.js を初期化できます。次のコードを使用すると、データ ライトボックス属性を持つすべての画像サムネイルを検索して初期化できます。

lightbox.option({
  'resizeDuration': 200,
  'wrapAround': true
})

上記のコードでは、lightbox.option() メソッドを通じていくつかのオプションを設定します。 ResizeDuration オプションは、画像があるサイズから別のサイズに変更されるのにかかる時間 (ミリ秒) を指定します。 WrapAround オプションは、ループ ブラウジングを有効にするかどうかを指定するために使用されます。

カスタム構成オプション

上記の初期化オプションに加えて、lightbox.js には、ライトボックスの外観と動作をカスタマイズするために使用できる他の多くのオプションも用意されています。以下は一般的なオプションの一部です:

disableScrolling: ライトボックスを開いたときにページのスクロールを無効にします;

fadeDuration: フェード効果の時間;

imageFadeDuration:画像フェード効果の時間 時間;

positionFromTop: 画像の上部から画面の上部までの距離;

showImageNumberLabel: 現在の画像の位置と総数を表示します。ギャラリー;

fitImagesInViewport: 画面のビューポートに合わせて画像サイズを自動的に調整します。

これらのオプションを初期化コードのパラメータとして使用できます:

lightbox.option({
  'disableScrolling': true,
  'fadeDuration': 300,
  'imageFadeDuration': 500,
  'positionFromTop': 100,
  'showImageNumberLabel': true,
  'fitImagesInViewport': true
});

ライトボックスのオンとオフを切り替えます

初期化が完了したら、画像のサムネイルをクリックすると、ライトボックスをフルサイズの画像に変換します。ライトボックス内の任意の場所をクリックするか、ESC キーを押してライトボックスを閉じます。

ビデオと Web コンテンツを開く

画像に加えて、lightbox.js を使用してビデオや Web コンテンツを表示することもできます。ビデオを表示するには、data-lightbox 属性を「video」に設定し、サムネイルの href 属性をビデオ ファイルの URL に設定するだけです。同様に、Web コンテンツを表示するには、data-lightbox 属性を「iframe」に設定し、サムネイルの href 属性を Web ページの URL に設定します。

<a href="path-to-videos/video.mp4" data-lightbox="video"> <!-- 视频缩略图 -->
  <img src="/static/imghwm/default1.png"  data-src="path-to-thumbnails/thumbnail.jpg"  class="lazy"   alt="Thumbnail">
</a>

<a href="http://example.com" data-lightbox="iframe"> <!-- 网页缩略图 -->
  <img src="/static/imghwm/default1.png"  data-src="path-to-thumbnails/thumbnail.jpg"  class="lazy"   alt="Thumbnail">
</a>

概要:

上記は、lightbox.js の使用方法を紹介しています。これは、Web ページ上に画像、ビデオ、Web コンテンツを表示するのに適した、非常に便利で使いやすい JavaScript プラグインです。単純な HTML コードといくつかの初期化オプションを使用して、非常にインタラクティブで美しい外観のライトボックス効果を作成できます。この記事が、lightbox.js の理解と使用に役立つことを願っています。

以上がlightbox.jsの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。