LogoMark.png

jQuery/ModalWindow

ModalWindow


はじめに

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

CONTENTS


LightBox

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

準備

本家サイトの説明を読むと、script は bodyの閉じタグ(</body>)の直前に置くように説明されていますが、ふつうに<head> 内に置いても動きます。
(2017.06月現在)

HTML

JavaScriptの追加記述は不要。とりあえずこれだけで動作します。

<!DOCTYPE html>
<html lang="ja">
   <head>
        <meta charset="UTF-8">
        <title>Sample</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <link rel="stylesheet" href="css/lightbox.min.css" >
    </head> 
    <body >
        <h1>Sample for LightBox</h1>
        <a href="images/photo.jpg"  data-lightbox="roadtrip" >
           <img src="images/thumb.jpg">
        </a>
    </body>
</html>


設置の要点

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

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


画像を用意する方法は2種類

「クリックで拡大」のしくみは、「同一の画像を、はじめ縮小表示しておいてクリックで拡大する」か、「はじめはサムネイルを表示、クリックで大きな画像を呼ぶ」か、2つの方法が考えられます。前者の場合は画像はひとつ(photo.jpg)、後者の場合は、サムネール画像(thumb.jpg)と大きな画像(photo.jpg)の2つを用意して下さい。

前者の方法は作成側にとっては楽ですが、スムーズな閲覧のためにはページが軽い方がいいので、サムネイルを表示する後者の方法がおすすめです。

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

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-02-02 (日) 18:05:08