LogoMark.png

jQuery/ModalWindow

ModalWindow


はじめに

モーダルウインドウとはメインコンテンツ上に表示されるウインドウで、ユーザーが応答するまで、メインコンテンツの操作が無効になるようなものを言います。モーダルウインドウは、本来ユーザーインターフェイス上の概念で、様々なものがそれに該当しますが、ここでは画像や動画をオーバーレイ表示で演出する jQueryプラグインをいくつか紹介しています。

CONTENTS


LightBox

サムネイル画像をクリックすると、元画像が呼び出されてモーダルウインドウ上に拡大表示される・・定番のプラグインです。

準備

HTML


CSS




設置の要点

この事例では、自分でオリジナルの JavaScript を書く必要はありません。以下のように、サムネイル画像のクリックで、画像ファイルへ直リンク・・というかたちのHTMLを書くだけです。<a>タグに data-lightbox=・・の表記があることで、LightBoxが機能します。基本は、data-lightbox="任意の名前"で、他の画像との区別をつけるのですが、実際には、同一ページ内の画像が連続表示できるように、 data-lightbox="roadtrip" と書くのが一般的です。

<a href="画像ファイル名"  data-lightbox="roadtrip" >
    <img src="サムネイル画像">
</a>


LightBox の仕組み

「クリックで拡大」の基本的なしくみは、サムネイル画像を<a>タグで囲んで、クリックしたら、href = に定義された画像ファイルに飛ぶ。これをモーダルウインドウに表示する・・というものです。

「はじめはサムネイルを表示、クリックで大きな画像を呼ぶ」か、「サムネイルとジャンプ先の画像に同一の画像を利用して、初期表示を縮小しておく」か、2つの方法が考えられます。前者の場合はサムネール画像と拡大版の画像の2つ、後者の場合は画像を1つ用意して下さい。

後者の方法は作成側にとっては楽ですが、スムーズな閲覧のためにはページが軽い方がいいので、サムネール画像と拡大版を別々に作成して、初期表示にはサムネイル画像を使う後者の方法がおすすめです。




その他のオーバーレイプラグイン

続々と新しいものが登場するので、以下の検索がおすすめです。
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/




PAGES

GUIDE

DATA

Last-modified: 2020-06-24 (水) 19:32:09