Lity とは？

画像や動画, 自作の要素など, なんでも良い感じにポップアップ表示してくれるプラグインです. jQuery のプラグインで軽量かつレスポンシブにも対応しているので PC, SP 問わず手軽に導入できます.

Lity - Lightweight responsive lightbox

Install

下記を追加するだけです.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' />  
<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js'></script>  

Usage

a タグをクリックすると画像ポップアップ表示

a タグの href に画像の url を指定して, data-lity 属性を追加するだけクリックするとポップアップ表示してくれるようになります.

<a href="http://phi-jp.github.io/phiary-workspace/assets/images/cafe.jpg" data-lity="data-lity">Show Image</a>  

a タグをクリックすると web ページをポップアップ表示(iframe)

a タグの url には html ページを指定しても良い感じでポップアップ表示してくれます.

<a href="https://www.youtube.com/watch?v=CwwQqhys3y4" data-lity="data-lity">Show iframe</a>  

a タグをクリックすると自作の要素をポップアップ表示

id を指定すれば自作の要素をポップアップ表示させることもできます.

<a href="#sample" data-lity="data-lity">Show Inline</a>

<div id='sample' class='lity-hide'>  
  <div>代官山のスタバで撮りました</div>
  <img src='http://phi-jp.github.io/phiary-workspace/assets/images/cafe.jpg' width='300px' />
</div>  

画像をクリックするとその画像をポップアップ表示

画像(img) を a タグで囲うだけですね♪

<a href="http://phi-jp.github.io/phiary-workspace/assets/images/cafe.jpg" data-lity="data-lity">  
  <img src='http://phi-jp.github.io/phiary-workspace/assets/images/cafe.jpg' width='320px' />
</a>  

JavaScript でポップアップ表示

既存のサイトの img 全てにサクッと lity を適応させたい場合は下記のコードを仕込めば ok です.

var lightbox = lity();  
$('img').click(function(e) {
  if (e.target.src) {
    lightbox(e.target.src);
  }
});

拡張子が .png や .jpg で終わらないやつを画像として表示

実際に自分がハマったやつなので備忘録がてら載せておきます. そんなに必要な状況ってないと思いますが, lity は内部で拡張子を見て image か iframe か切り分けているので強制的にすべて image としてポップアップ表示させる方法です.

handler 関数を直接いじります.

lity.handlers('image', function(target) {  
  var img = $('<img src="' + target + '">');
  var deferred = $.Deferred();
  var failed = function() {
      deferred.reject(error('Failed loading image'));
  };

  img
      .on('load', function() {
          if (this.naturalWidth === 0) {
              return failed();
          }

          deferred.resolve(img);
      })
      .on('error', failed)
  ;

  return deferred.promise();
});