ホームページ

　画像や動画をポップアップして、モーダルウィンドウに表示する jQueryのプラグインが、ブログやホームページで人気を博しています。その中で今最も使われているのが Colorboxです。誰でも自由にダウンロードして無料で利用できます。
　下の画像のいずれかをクリックしてみてください。画像が拡大されてポップアップし、周りが暗くなります。画像のクリックを続けるとスライドショウになります。画像の外の暗い部分をクリックすると元のページに戻ります。画像下の「← → ×」ボタンでも操作できます。

　また、YouTubeにアップロードした動画も、Webページの中でモーダルウィンドウにポップアップして再生できます。ここではColorbox のダウンロードとその使い方について説明します。
（注）モーダルウィンドウ（modal window）とは、同一ページ上にポップアップ画像などをオーバーレイ表示し、その操作が終了するまで背景ページが操作を受け付けないウィンドウをいいます。

＜Colorboxのダウンロードと利用環境の準備＞

　Colorboxは「Colorbox - a jQuery lightbox」からのダウンロードできます。ダウンロードした右図上段のzipファイルは、圧縮されているので解凍してください。
　解凍すると、その中に右図の14個のフォルダとファイルが含まれています。この中から次の3つを使うことにします。

・example1\imagesフォルダ
・example1\colorbox.css
・jquery.colorbox-min.js

　なお、上記3つcolorbox関連のフォルダとファイルは「colorbox」フォルダの下に、 jQueryプラグインを利用するために別途ダウンロードしておいた「jquery-3.1.1.min.js」は、「jquery」フォルダの下に置くことにします。

＜Colorboxを利用するための設定＞
　本Webページ「colorbox.html」のファイル位置は、次のようになっているとします。
　　「hirakata-s/it/homepage/colorbox.html」
　まず、<head>と</head>の間に、このWebページからの相対指定で以下の記述をします。

　次に、同じ形式でポップアップ表示する画像グループをセレクタ名で設定します。ここで「group1」がセレクタ名で任意に命名できます。このグループの数は増やすこともできます。

　さらに、<body>と</body>の間で、ポップアップ画像を配置する箇所に、実際の画像の数だけ以下の記述をします。

　このように記述すると、サムネイル画像1をクリックすると、画像1 が保存されている画素数でポップアップします。ポップアップした画像1 の下段には、title に記述したキャプション1が表示されます。

＜Colorbox のYoutubeへの適用＞

　右の写真をクリックしてみてください。画像のポップアップと同じように、Youtubeにアップロードした動画がモーダルウィンドウにポップアップされて再生されます。
　このように、Colorbox をYoutubeに適用するには、まず<head>と</head>の間に以下の記述を追加します。
　ここで「youtube」はセレクタ名です。「innerWidth と innerHeight」はポップアップする動画の幅と高さです。実際の動画の大きさと異なる値を指定することもできます。単位は「px」ですが記述はしません。

　次に、<body>と</body>の間でYoutube動画をポップアップするところに、以下のようにhtmlを記述します。ここの「動画ID」の取得については、「YouTube動画をWebページに埋め込む」のページを参照してください。

　この「動画ID」は、実際には「動画ID?rel=0&autoplay=1」のように、橙色の2つのパラメータを付けることを奨めます。このパラメータは「再生後に関連動画を表示しない」「動画を自動的に再生する」というものです。
　この設定でサムネイル画像をクリックすると、Youtube動画が指定の画素数でポップアップし再生されます。ポップアップ動画の下段には、titleに記述したキャプションが表示されます。

＜スマホへの対応＞
　ここまでの説明は画像やYoutube動画を、パソコンのColorboxで表示する場合の話です。ただ、スマホではディスプレイの表示幅が狭いので、このままでは表示画面が溢れてしまいます。そこで、<head>内 jqueryに次の指定を追記します。
　「,maxWidth:'100%',maxHeight:'100%'」
　これだけの指定でスマホ対応になります。スマホでは画像や動画は、ディスプレイの幅に合わせて縮小して表示してくれます。下記は画像が2グループとYoutube動画が1つの場合の、<head>内の各jqueryの記述例です。

（注）本Webページはスマホへの対応設定はしていません。

画像をポップアップ表示する Colorbox