テキストをポップアップで表示できるプラグイン「Featherlight.js」
2019.08.20 Posted by Coding_team
こんにちは、ウェブラボクリエイターズメモです。
今回は、テキストもポップアップで表示できるlightboxを実装するプラグイン「Featherlight.js」を紹介します。
画像だけではなく、テキストやリンクなど、幅広いコンテンツをポップアップとして表示したい場合に活躍してくれるプラグインです。
デモページはこちら。
→DEMO
今回はテキストをポップアップとして表示させる実装方法をご紹介いたします。
目次
実装方法
実装方法について、こちらのサイトを参考にしました。
https://webkaru.net/jquery-plugin/featherlight/
1．プラグインをダウンロードする
Githubからダウンロードします。
https://noelboss.github.io/featherlight/
使用するファイルはsrcフォルダ内の以下になります。
【js】featherlight.js
【css】featherlight.css
初期設定から手を加える予定がない場合は、releaseフォルダの中に「.min」の付いたファイルがあるのでそちらをご利用ください。
※「.min」の付いたファイルとは、機能自体はそのままにファイルサイズを最小化したファイルを指します。
2．jquery本体、featherlight.js、featherlight.cssを読み込ませる
■HTML <head>タグ内
|
1 2 3 |
<link rel="stylesheet" href="css/featherlight.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="js/featherlight.js"></script> |
※任意のパスに変更してください。
3．HTMLにリンクとポップアップさせたいコンテンツを記述する
■HTML <body>タグ内
・ポップアップにつなげるリンク部分
|
1 |
<a href="javascript:void(0)" data-featherlight="#inner">ポップアップリンク</a> |
・ポップアップで表示する部分
|
1 2 3 |
<div class="featherlight-sample" id="inner"> <p>ここに表示したいコンテンツ（文章、テキスト、リンクなど）を記載してください。</p> </div> |
※href=”javascript:void(0)”とはリンクを無効化するための指定です。
他にもいろいろな指定方法があるので、環境やユーザーに合わせて変更してください。
4．「ポップアップで表示する部分」がクリック前に表示されないようCSSで指定する
■CSS内
|
1 2 3 |
.featherlight-sample { display: none; } |
※この記述がないと、ポップアップリンクを押す前のページにもポップアップのコンテンツが表示されてしまいまうのでご注意ください。
以上で実装が完了です。
class名やid名は任意の名前に変更しても動作するので、いくつかポップアップを使用したい場合はid名をinner01～などの連番にしても便利だと思います。
とても簡単に実装できるので、是非試してみてください。
以上、ウェブラボクリエイターズメモでした。
関連記事こちらの記事も合わせてどうぞ。
