lityプラグインの準備

Lityのサイトからファイルをダウンロードして、任意の場所にアップロードします。

そして、アップロードしたファイルを読み込みます。

<link href="/lity.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/lity.js"></script>

Lityファイルをアップロードするのが手間であれば、以下のタグを記述するだけでも使用できます。

<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>

これで準備は完了です。

Lityでポップアップ表示させる

先述した準備が完了すれば、実際に表示させるだけです。

画像をポップアップ表示

ポップアップさせたい画像を用意して、以下のタグを記述します。

<a href="画像URL" data-lity="data-lity">
	<img src="画像URL"/>
</a>

サンプル

YouTube動画をポップアップ表示

YouTube動画もポップアップ表示させることができます。

<a href="動画URL" data-lity="data-lity">
	YouTube動画
</a>

サンプル
YouTube動画

Googleマップをポップアップ表示

自作の地図画像を用意して、画像をクリックするとGoogleマップがポップアップ表示されるという表示もおもしろいですね。

<a href="GoogleマップURL" data-lity="data-lity">
	地図画像
</a>

サンプル
地図画像

リンク先ページをポップアップ表示

Lityで一番おもしろいなと思ったのが、リンク先のページをポップアップ画面で表示ができること。ブログ紹介やサンプルを紹介する際に、わざわざリンク先を見にいってもらう必要がなく、記事内で表示させることができるので、訪問者としても便利な機能ですよね。

ただ、これは一部制限があるようです。スマホでも表示がうまくいかず使用機会は限定されますのでご注意ください。

<a href="URL" data-lity="data-lity">
	リンク先の紹介
</a>

サンプル

※PCでご覧ください。

ブログ記事でもっとポップアップ表示を活用してもいいと思う

画像で説明する際に、記事コンテンツの表示領域が狭いブログは、ポップアップ表示に対応して欲しいな（広告以外）と思う機会が多いです。このサイズだとちょっと見づらいなって。動画の紹介でも新たにウィンドウを表示させてまではという時もありますよね。

そういった時は、Lityでポップアップ表示させてあげると便利に閲覧することができます。

jsだけ読み込んでおけば簡単に設定できるので、ぜひ使用してみてください。このブログでも機会があったら使っていこうかな。