ねとたす

Lity.jsの導入方法。画像や動画を魅力的にポップアップ!【jQuery】

      2016/05/11

jquery-lity01

LightBoxみたいに画像や動画をボワッといい感じにポップアップしてくれる軽量jQueryプラグイン「Lity.js」がすっごくいい!
導入してみたので、特徴や導入方法をまとめました。

スポンサード

動画や画像をいい感じにポップアップするjQueryプラグイン

ぼわっといい感じにポップアップする軽量jQueryプラグイン

「LightBox」と同じように使えるjQueryプラグインなのですが、もっとシンプルになっているイメージでしょうか。ぼわっといい感じにポップアップさせたいだけであれば、「Lity」だけで事足りるのではないかと。

Lity.jpの魅力的なところ

  • jsがとにかく軽量!5KB未満
  • 実装がかんたん。data-lity=”data-lity”を付けるだけ
  • 画像、動画、GoogleMAP、URLもポップアップできる
  • レスポンシブにも対応

写真を魅力的にみせるだけじゃなく、YouTubeやVimeoなどの動画、Googleマップまでポップアップできるのがいいです♪しかも軽量で、実装がかんたんときた!表示の高速化が求められてる時代に、これはうれしい。

Lity.jsの導入方法

jQueryプラグイン「Lity」を実装する方法を説明します。といっても、超かんたんです。

Lity公式サイトからファイルをダウンロード

Lityの公式サイトやGitHubからjQueryプラグイン「Lity」のファイルをダウンロードします。
公式 http://sorgalla.com/lity/

必要なファイルを自分のサイトにアップロード

jquery-lity04

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

zipファイルを解答するといろいろあるのですが、distフォルダにある3つのファイルを自分のサイトにアップロードします。
jquery.jsも必要ですが、ワードプレスなどの場合は、既に読み込んでいると思います。

headタグ内で読み込むように記述


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

「jquery.js」よりも後に、「lity.min.js」を読み込む必要があるので注意しましょう。

href属性にカスタムデータ属性を追記


#画像の例
<a href="sample.jpg" data-lity="data-lity">画像をLityで表示</a>
#YouTubeの例
<a href="https://www.youtube.com/watch?v=XXXXX" data-lity="data-lity">YouTubeをLityで表示</a>

「data-lity」のカスタムデータ属性を指定しなくても動きますが、念のため記述しておく方がよさそう。

jquery-lity03

ほら、この通り!

Googleマップのほか、画像はもちろん、YouTubeやVimeoなどの動画、URL要素もいい感じにポップアップしますよ。軽量だし、レシポンシブ対応だし。けっこう使えるjQueryプラグインですぞ。

NEW!! ありがたいことに最近、仕事依頼に関する相談が増えてきましたので、ウェブサイト・ECサイト支援に関するサービスサイトを立ち上げました!

 - ワードプレス

Lity.jsの導入方法。画像や動画を魅力的にポップアップ!【jQuery】

ウェブが好きな中小企業診断士のブログ

Copyright© ねとたす , 2016 All Rights Reserved.