webmanab.html

lightbox系の決定版かも、jQuery非依存でマルチデバイス対応のオールインワンな「lightgallery.js」 -『plug-in』

table of contents
ー

    lightgallery.jsは高機能

    「lightgallery.js」は、画像/動画/iframeを格納できる、レスポンシブ対応でタッチデバイス対応、好みのアニメーションエフェクトを選択でき、jQueryなどのライブラリに非依存のlightbox系スクリプトです。

    デモページが充実している

    デモページに多数のサンプルが用意されていて、サムネイルを生成したり、キャプションの挿入、フルスクリーン対応や、ソーシャルシェアボタンを設置することなど、簡単に実装が可能です。
    レスポンシブイメージの実装方法もデモに記載されていました。
    IE9+で主要ブラウザをサポートしています。

    lightgallery.js demo

    導入が手軽にできます

    以下が「lightgallery.js」のベーシックな起動方法です。
    該当のCSSとscriptを読み込んで、実装したい箇所を任意のidでラップします。

    html

    
<head>
  <link rel="stylesheet" href="css/lightgallery.css" /> 
</head>

<body>

<div id="lightgallery">
  <a href="img1.jpg">
      <img src="thumb1.jpg" />
  </a>
  <a href="img2.jpg">
      <img src="thumb2.jpg" />
  </a>
  <a href="img3.jpg">
      <img src="thumb3.jpg" />
  </a>
</div>

<script src="js/lightgallery.min.js"></script>
<!-- lightgallery plugins -->
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script>
  lightGallery(document.getElementById('lightgallery')); 
</script>
</body>

    デザインのカスタマイズも容易に

    「lightgallery.js」はSassベースでスタイルシートが記述されていて、細かく変数が定義されていrので、カスタマイズが容易にできます。

    lightgallery.js demo
    lightgallery.js DL

    おわります。

    lightbox系の決定版かも、jQuery非依存でマルチデバイス対応のオールインワンな「lightgallery.js」 -『plug-in』のアイキャッチ画像

    share
    ー

    tag
    ー

    related
    ー