#author("2021-09-25T11:33:58+09:00;2020-06-24T19:32:09+09:00","default:inoue.ko","inoue.ko")
*ModalWindow
~
**はじめに
モーダルウインドウとはメインコンテンツ上に表示されるウインドウで、ユーザーが応答するまで、メインコンテンツの操作が無効になるようなものを言います。モーダルウインドウは、本来ユーザーインターフェイス上の概念で、様々なものがそれに該当しますが、ここでは画像や動画をオーバーレイ表示で演出する jQueryプラグインをいくつか紹介しています。
~
***CONTENTS
#contents2_1
~
**LightBox
http://lokeshdhakar.com/projects/lightbox2/
~
サムネイル画像をクリックすると、元画像が呼び出されてモーダルウインドウ上に拡大表示される・・定番のプラグインです。
~
-DEMO：https://koichi-inoue.github.io/JQ_LightBox/
-CODE：https://github.com/koichi-inoue/JQ_LightBox
~
***準備
-1）ファイルセットのダウンロード
http://lokeshdhakar.com/projects/lightbox2/ からDLして下さい。
-2） 構成ファイルの確認
DLしたファイルを解凍すると、中に様々なフォルダやファイルが見つかります。必要なファイルは ''dist''(distribution) フォルダの中の数個です。必要なもののみを取り出してフォルダを構成すると以下のようになります。
--index.html
--css（フォルダ）
---''lightbox.min.css''
---style.css
--js （フォルダ）
---jquery-xxxx.min.js ← 自分で用意して下さい。
---''lightbox.min.js''
---（script.js）LightBox自体は追加のスクリプトを必要としません
--images （フォルダ）
---''close.png''
---''loading.gif''
---''prev.png''
---''next.png''
---動作確認用の画像をいくつか用意して下さい
~
~
***設置の要点
この事例では、自分でオリジナルの JavaScript を書く必要はありません。以下のように、サムネイル画像のクリックで、画像ファイルへ直リンク・・というかたちのHTMLを書くだけです。＜a＞タグに data-lightbox＝・・の表記があることで、LightBoxが機能します。基本は、data-lightbox="任意の名前"で、他の画像との区別をつけるのですが、実際には、同一ページ内の画像が連続表示できるように、 data-lightbox="roadtrip" と書くのが一般的です。
<a href="画像ファイル名" data-lightbox="roadtrip" >
<img src="サムネイル画像">
</a>
~
***LightBox の仕組み
「クリックで拡大」の基本的なしくみは、サムネイル画像を＜a＞タグで囲んで、クリックしたら、href = に定義された画像ファイルに飛ぶ。これをモーダルウインドウに表示する・・というものです。
「はじめはサムネイルを表示、クリックで大きな画像を呼ぶ」か、「サムネイルとジャンプ先の画像に同一の画像を利用して、初期表示を縮小しておく」か、２つの方法が考えられます。前者の場合はサムネール画像と拡大版の画像の２つ、後者の場合は画像を１つ用意して下さい。
後者の方法は作成側にとっては楽ですが、スムーズな閲覧のためにはページが軽い方がいいので、サムネール画像と拡大版を別々に作成して、初期表示にはサムネイル画像を使う後者の方法がおすすめです。
-「サムネイルを表示からクリックで大きな画像を呼ぶ」ケース：◯
<a href="images/photo.jpg" data-lightbox="roadtrip">
<img src="images/photo_s.jpg">
</a>
-「はじめ縮小表示しておいてクリックで拡大する」ケース：△
<a href="images/photo.jpg" data-lightbox="roadtrip">
<img src="images/photo.jpg" width=80>
</a>
~
~
**その他のオーバーレイプラグイン
続々と新しいものが登場するので、以下の検索がおすすめです。
[[Google: jQuery プラグイン モーダルウィンドウ]]
~
***Fancybox 3
http://fancyapps.com/fancybox/3/
~
***FlipLightBox
http://flipgallery.net/fliplightbox.html
~
***Fluidbox
http://terrymun.github.io/Fluidbox/demo/index.html
~
***Formstone
https://formstone.it/components/lightbox/
~
***iLigntBox
http://ilightbox.net/
~
***iziModal
http://izimodal.marcelodolce.com/
~
***Magnific-popup
http://dimsemenov.com/plugins/magnific-popup/
~
***Modal Video
https://appleple.github.io/modal-video/
~
***Photoswipe
http://photoswipe.com/
~
***Strip
http://www.stripjs.com/
~
***Swipebox
http://brutaldesign.github.io/swipebox/
~
***Venobox
http://veno.es/venobox/
~
~
~
