1. 製品
  2.   画像
  3.   JavaScript
  4.   LightGallery
 
  

レスポンシブでカスタマイズ可能な画像ギャラリー プラグイン

Lightgallery.js は、便利なオープン ソースの画像リサイザーおよびカスタマイザーです。

Lightgallery.js は便利で高度にカスタマイズ可能なプラグインで、Web サイトでビデオや画像を読み込んで表示する際に多くの機能を必要とするプロジェクトに最適です。 JavaScript と CSS で完全に開発された、開発者に多くのオプションを提供するフル機能のライトボックス ギャラリーです。

オープン ソースであり、無料で使用できるプラグイン Lightgallery.js は、ギャラリーの形式で画像や動画アセットのサイズを変更して Web サイトにアップロードする以外のオプションが必要な場合に便利です。また、スライド内の画像とビデオのブラウザ履歴を保存し、ギャラリー画像ごとに一意の URL を提供します。高速なだけでなく、メモリ パフォーマンスを妨げない、軽量でモジュール式のレスポンシブなライトボックス ギャラリー クリエーターです。

Previous Next

LightGallery の使用を開始する

NPM 経由で LightGallery をインストールするための推奨される方法。以下のコマンドでインストールしてください。

NPM 経由で LightGallery をインストールする

 npm install lightgallery.js

画像操作用の無料の JavaScript API

Lightgallery.js には、サムネイルの作成、全画面表示、ズームインとズームアウトなどの多くの組み込みモジュールが付属しており、不要な場合は破棄できます。プロジェクトの要件に応じて、独自のモジュールを追加することもできます。画像やビデオのサイズを変更する JavaScript メソッドとは対照的に、Lightgallery.js は応答性の高いサイズ変更に CSS のみのアプローチを使用して、大幅に高速かつ柔軟にします。ギャラリーの SASS 変数を更新するだけで、ニーズに合わせてプラグインを簡単にカスタマイズできます。

無料の JavaScript API を使用してサムネイルを作成する

サムネイルに関して言えば、Lightgallery.js を使用すると、YouTube と同じようにアニメーション化されたサムネイルを有効にして、よりモダンな雰囲気を与えることができます。 YouTube または Vimeo ギャラリーでアニメーション サムネイルを有効にすることもできます。 Lightgallery.js には、美しいギャラリーの作成に使用できるプラグインに組み込まれた 20 以上のアニメーションが付属しています。

静的サムネイルギャラリーをJavaScriptから作成

 lightGallery(document.getElementById('static-thumbnails'), {
    animateThumb: false,
    zoomFromOrigin: false,
    allowMediaOverlap: true,
    toggleThumb: true,
});

JavaScript によるサムネイル ギャラリーの作成のカスタマイズ

 lightGallery(document.getElementById('customize-thumbnails-gallery'), {
    // Add a custom class to apply style only for the particular gallery
    addClass: 'lg-custom-thumbnails',
    // Remove the starting animations.
    // This can be done by overriding CSS as well
    appendThumbnailsTo: '.lg-outer',
    animateThumb: false,
    allowMediaOverlap: true,
});
 日本