1年以上前に更新された記事です。
情報が古い可能性がありますので、注意してください。
情報が古い可能性がありますので、注意してください。
Lityとは
超軽量のライトボックスjQueryプラグインです。
こんな感じに画像等を拡大表示することが出来ます。
ほかにも
なんかもできます。
設置方法
ダウンロード
サイトからファイルをダウンロード。
Downloadをクリック。
Source code(zip)をクリック。
WordPressに設置
解凍後、distフォルダ内にある
- lity.min.css
- lity.min.js
をアップロードしてください。
ヘッダー内でjQuery読み込んだ後あたりに下記を追加します。
1 2 | <link href="dist/lity.min.css" rel="stylesheet"> <script src="dist/lity.min.js"></script> |
あとは、画像等のアンカータグに「data-lity」という属性を付ければOK。
1 2 3 | <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プラグイン化
案外無かったので作ってみました。
コメントを残す