軽い！ライトボックスjQueryプラグイン「Lity」をWordPressで利用する

Lityとは

超軽量のライトボックスjQueryプラグインです。

こんな感じに画像等を拡大表示することが出来ます。
ほかにも

なんかもできます。

設置方法

ダウンロード

サイトからファイルをダウンロード。

Downloadをクリック。

Source code(zip)をクリック。

WordPressに設置

解凍後、distフォルダ内にある

• lity.min.css
• lity.min.js

をアップロードしてください。

ヘッダー内でjQuery読み込んだ後あたりに下記を追加します。

<link href="dist/lity.min.css" rel="stylesheet">
<script src="dist/lity.min.js"></script>

あとは、画像等のアンカータグに「data-lity」という属性を付ければOK。

<a href="https://harvestasya.com/blog/wp-content/uploads/2016/04/Lity.png" rel="attachment wp-att-367" data-lity>
<img src="https://harvestasya.com/blog/wp-content/uploads/2016/04/Lity.png" alt="Lity" width="820" height="480" class="alignnone size-full wp-image-367" />
</a>

とにかく軽い

とにかく軽いし、設置もかなり簡単です。
ただ、拡大表示して閉じる際、×ボタンか暗い部分をクリックしないと閉じないってところが難点ですね。
PCの場合、ブラウザのウィンドウサイズと画像サイズがほぼ一緒になると、×ボタンを押さないといけなくて閉じにくくなるので、画像サイズには注意した方が良さそうです。

WordPressプラグイン化

案外無かったので作ってみました。