アプリ開発からお金の節約まで幅広く気になったネタを記録していきます

さくらいらぼ

Web制作

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】

スポンサードリンク

投稿日:

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】

LityはjQueryを利用したLightbox系のJavaScriptライブラリです。

ポイント


画像、インラインコンテンツ、iframe、動画URLをポップアップ表示できる
・3kBと超軽量
・レスポンシブ対応
・利用にはjQuery本体が必要。
・MIT license.

Lityを使うとどうなる?

ユーザーがボタンを押すと、対象の内容をポップアップ表示できます。
ポップアップ表示をすることで、自分のサイトから他のサイトへ離脱を減らすことが可能になります。
スマホブラウザで開いたときにも別のタブで表示されることはなく、同じ画面内でポップアップ表示されます。

画面右上には「X」印が表示され、「X」を押すとポップアップが閉じます。

Lityの実装方法

Lity の公式サイトからソースをダウンロードします。

GithubのURLへ移動したら「Source code(zip)」を押してダウンロードします。

スポンサードリンク

Lityのサンプル

lity-2 > index.htmlを開くとLityのサンプルが見られます。

Lightboxのインストール

headタグ内にlity.cssへの読み込みリンクと、
jQueryのリンクとlity.jsを読み込みさせます。
lity.jsの読み込みはjQueryの行の下に書きます。

lity.min.css,lity.mini.jsはlity.css,lity.jsのスペースや改行を取り除いて
ファイルサイズを軽量化したもの。中身は同じです。

Lityの使い方

a要素の中にdata-lityを書き込みます。
これだけ。

インライン要素を表示させる場合には、インライン要素にclass="lity-hide"のクラスをつけることで
非表示になります。
ページ内リンク同様に#を頭につけて表示させる要素のidを書き込みます。

まとめ

ライブラリを読み込ませて、 data-lity を書き込みするだけなので非常に簡単です。
Youtube動画のポップアップ表示は重宝するのではないでしょうか。

検証環境

Lity バージョン 2.3.1
Google Chrome バージョン: 72.

【WEB制作】Lightboxの実装方法。かっこいい画像ギャラリーがJavaScriptの知識なしで簡単実装できる

LightboxはjQueryを利用したJavaScriptライブラリ。 最近は見かける機会が減ってきましたが、写真を押すと写真が拡大表示されて 黒背景に写真が等倍で表示される「写真の見栄えをよくできる」ライブラリです。 サムネイルを押すと、大きい画像が等倍にリサイズされながらフェード処理されて表示されるので 動きがあり非常に見栄えが良いのがポイント高いです。 JavaScriptの専門知識がまっ ...

スポンサードリンク

-Web制作
-, ,

Copyright© さくらいらぼ , 2019 All Rights Reserved.