小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

レスポンシブWebデザインのライトボックス(画像拡大表示)

最終更新日: 2016-06-27
レスポンシブWebデザイン ライトボックスでの画像拡大
CMS「すぐ使えるCGI」にライトボックスを導入して、サムネイル画像をクリックした時にホームページ上で画像を拡大表示する方法をご紹介します。

ライトボックスの種類

「ライトボックス」は、サムネイル(サムネール、縮小版)で表示されている画像を、同じWebページ上で拡大表示する方法です。ポップアップウィンドウの動作に近いですが、JavaScript と CSS を利用して表示を調整します。このため、実サイズと異なるサイズでも拡大画像の表示が可能です。

この動作の事を「ライトボックス(lightbox)」と呼びこのためのツールはたくさんありますが、このページでは、以下のURLで公開されているレスポンシブWebデザインのライトボックスの使い方を紹介します。

Responsive jQuery Lightbox Plugin(外部サイト)

レスポンシブWebデザインのライトボックスとは

レスポンシブWebデザイン ライトボックスでの画像拡大

ライトボックスは画像を拡大しますが、PC画面で適当な拡大サイズと、スマートフォンなどの小さい画面で適当な拡大サイズは異なります。スマートフォンがまだ主流で無かった頃には、画像を適当な大きさに調整しておいた上で固定サイズで表示するライトボックスが主流でしたが、これだとスマートフォン等小さな画面では見にくくなってしまう場合がありました。

一方、レスポンシブWebデザインのライトボックスは画面(ブラウザのウィンドウ)に収まるように画像サイズを調整して表示してくれます。最大表示サイズは画像のピクセルサイズです。

PC用 固定サイズ版 ライトボックス

固定サイズのlightBox
このページでご紹介するライトボックスはPC専用Webサイトでも使えますが、固定サイズ表示でよい場合は、別の種類のライトボックスの選択肢もあります。詳しくは下記ページをご覧下さい。

jQuery lightBox の使い方(PC用 固定サイズ版)

レスポンシブWebデザイン ライトボックスのデモ

ライトボックスでの拡大画像表示は、<iframe> からの拡大表示をしたり、また、グループ化の違いによっていくつか方法があります。いくつかのパターンでデモがありますのでご覧下さい。

Webページ上の全ての画像を拡大表示

Webページ上の全ての画像を拡大表示

一つのサムネイル画像をクリックした時に、そのページ内にある画像を全て拡大画像の前後リンクで表示します。

「すぐ使えるCGI」の詳細ページでの利用は主にこの形式になります。

全ての画像を拡大表示 デモ

Webページ上の画像をグループ化して拡大表示

Webページ上の画像をグループ化して拡大表示

一つのWebページページ内に多数の画像が掲載されている場合は、画像のグループを作り、拡大画像が表示された時にはそのグループ内だけで前後リンクする事もできます。

「すぐ使えるCGI」の場合は「全一覧」にサムネイル画像を表示し、記事ごとに画像をグループ化して表示したい場合にこの方法を使います。

画像をグループ化して拡大表示 デモ

インラインフレーム内に表示しているサムネイル画像を親ページ内に拡大表示

インラインフレーム内画像の拡大

インラインフレーム(アイフレーム、<iframe>)内のページにあるサムネイル画像を親ページ内にライトボックス表示させる事もできます。

「すぐ使えるCGI」の場合は、画像付の短い一覧(新着情報)をホームページに表示している場合などに使用できます。

インラインフレーム内画像の拡大表示 デモ

レスポンシブWebデザイン ライトボックス設定方法

ご自身でレスポンシブWebデザインのライトボックスを製品に組込む場合は、以下の通り設定して下さい。

なお、いずれの製品も既に何らかのライトボックス表示が組み込まれている場合があります。編集する際は、ファイル内に既に同じ表示が無いか確認しながら行って下さい。

準備1:「すぐ使えるCGI」の設置

使用する「すぐ使えるCGI」製品をダウンロードし、ダウンロードが終わったページからリンクしている「ステップ by ステップガイド」をご覧になりながら製品を設置して下さい。お試しは1か月間無料です。

テスト登録

テストデータとして記事を1件登録して、管理画面が正常に動作する事を確認して下さい。画像のアップロードも試して下さい。

準備2:ライトボックスファイルのダウンロード

「準備1」で設置した製品が Ver. 4.x 以下(=Ver. 5.0 未満)の場合は、下のボタンから、レスポンシブWebデザイン ライトボックスのデモ製品をダウンロードして下さい。この中に、レスポンシブWebデザイン ライトボックス組込みに必要なファイルが含まれています。

解凍

ダウンロードした ZIP ファイルを解凍ソフトで解凍して下さい。解凍した中にある webdir/parts/ というディレクトリにレスポンシブWebデザインのライトボックス用のファイル一式が入っています。

太字のファイルがライトボックスの動作に必要なファイルです。黒字のファイルは Ver. 5.0 の製品に元々含まれています。青字のファイルはライトボックス部分ではなく、このサンプルでサムネイル部分の表示設定に使っています。

parts/
|-- css/
|   |-- jquery-lightbox.css
|   |-- sugu-397-lightbox.css
|   |-- sugu-admin-old-ie.css
|   |-- sugu-admin.css
|   |-- sugu-site-old-ie.css
|   `-- sugu-site.css
|-- img/
|   |-- close.png
|   |-- loading.gif
|   |-- next.png
|   `-- previous.png
`-- js/
    |-- sugu-admin.js
    `-- sugu-site.js

これらのファイルは後でサーバにアップロードしますが、アップロードする場所を決めておいて下さい。なお、css/ ディレクトリと img/ ディレクトリは同じ場所にアップロードして下さい。この2つのディレクトリの相対パスがずれると動作しません。

テンプレートの編集内容

ライトボックスが使えるように「すぐ使えるCGI」のテンプレートを編集していきますが、編集する内容は以下の3点です。

  1. 画像を<a> タグで囲い、class属性に「image-link」を追加、キャプション(画像の説明)表示用の属性を設定
  2. ライトボックス用の CSS の読み込み
  3. ライトボックス用の JavaScript の設定

順番に説明します。上のボタンからダウンロードできるデモ製品のテンプレートも、参考として適宜ご覧下さい。

画像タグの編集

まずは画像タグに拡大画像へのリンクを付け、class属性とキャプション(画像のタイトル)表示用の属性を追加していきます。画像タグはページが書き出された時に以下のようなるようにします。このHTMLコードの要件はどの書き出しページでも同じです。

<a href="(拡大画像のURL)" target="_blank" class="image-link" data-caption="(画像の説明)">
<img src="(サムネイル画像のURL)" alt="(画像の説明)"></a>

キャプション(画像のタイトル)表示用の属性とは

拡大された画像のキャプション(画像のタイトル)

data-caption 属性は今回採用したレスポンシブWebデザインのライトボックスの独自属性で、拡大画像の表示時に画像のキャプションとしてウィンドウの下に帯状に表示されます。なお、キャプションの表示が不要であれば data-caption属性は追加不要です。

画像タグ編集対象ファイル

どのページにライトボックスを設定するかによって、画像タグの編集対象ファイルや具体的なテンプレート変数が違います。それぞれ以下のように編集して下さい。

ページ 編集するテンプレートファイル
(templates/article 内)
詳細ページ webdir/1.html、2.html、... article_image_#.txt (#は画像番号に対応する数字)
全一覧(目次) webdir/index.html article_list.txt
短い一覧(新着情報) webdir/index_short.html short_list.txt

詳細ページ用の設定例

詳細ページの画像の編集例は下記の通りです。これ以外に必要なクラス設定やサイズ指定などの必要なHTMLコードがあれば追加して下さい。対象ファイルは templates/article/article_image_#.txt (#は画像番号に対応する数字)です。

<a href="%_d_%/%_filename_escaped_%" target="_blank" class="image-link" data-caption="%_imagetext_%">
	<img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%">
</a>

全一覧と短い一覧用の設定例

全一覧(目次)と短い一覧(新着情報)の画像の編集例は下記の通りです。これ以外に必要なクラス設定やサイズ指定などの必要なHTMLコードがあれば追加して下さい。コード内の#(赤字部分)は画像番号に対応する数字です。対象とする画像番号に応じて変更して下さい。

<a href="%_d_%/%_imagename_escaped_#_%" target="_blank" class="image-link" data-caption="%_imagetext_#_%">
	<img src="%_d_%/%_thumbnail_escaped_#_%" alt="%_imagetext_#_%">
</a>

ライトボックス用のCSS の読み込み

次に ライトボックス用のCSSファイルを読み込みます。以下のコードを編集対象ファイル(後述)の </head> (終了タグ)の直前に追加して下さい。なお、既にファイル内にこのタグがある場合があります。その場合は追加は不要です。

追加の後、「調整内容」の調整をして下さい。

ライトボックス用のCSS のタグ

<!-- ライトボックスによる画像拡大をする場合、以下の1行を追加 -->
<link rel="stylesheet" type="text/css" href="./parts/css/jquery-lightbox.css">

<link rel="stylesheet" type="text/css" href="(任意のパス)/jquery_lightbox-0_5.css">

調整内容

  • 青字の部分は先ほどダウンロードしたファイルにあった parts/css/jquery-lightbox.css の設置予定場所に変更して下さい。
  • もし編集するファイル内に赤字のコードが含まれていれば、削除して下さい。

CSS用 <link> タグ編集対象ファイル

上記のコードを追加する編集対象ファイルは、「ライトボックスの拡大画像を表示するページ」です。通常は「すぐ使えるCGI」のテンプレートファイルですが、もし「短い一覧(新着情報)」などでインラインフレームでの読み込みを予定しているのであれば、編集対象は <iframe> タグを設定する親ページです。

CSS用リンクタグ編集対象ファイル

ページ 編集するテンプレートファイル
(templates/article 内)
詳細ページ webdir/1.html、2.html、... article.html
全一覧(目次) webdir/index.html article_list.html
短い一覧(新着情報) webdir/index_short.html short_list.html
<iframe>を使う場合 (Webサイト内の任意のページ) (当該ページ)

【注意点】この編集で読み込むCSSファイルは拡大表示された画像のスタイルを指定します。サムネイル画像のスタイルの設定はそれぞれ対応するテンプレートファイルにして下さい。

ライトボックス用の JavaScriptの設定

最後に、JavaScript を設定します。編集対象ファイルは上記のCSS編集対象ファイルと同じです。編集内容は以下の2つの部分に分かれます。以下にそれぞれ説明します。

  1. JavaScript ファイルの読み込み(共通)
  2. JavaScript コードの指定(表示方法によって異なる)

JavaScript ファイルの読み込み(共通)

JavaScript タグは </body> (終了タグ)の直前に追加の上、調整をして下さい。

<script src="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/js/jquery-1_11_3-min.js" type="text/javascript"></script>
<script src="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/js/jquery-lightbox-min.js" type="text/javascript"></script>
<script src="(任意のパス)/jquery_lightbox-0_5.js" type="text/javascript"></script>

調整内容

  • 緑字の部分は、ページ内に既に jQuery 1.x が読み込まれていれば不要です。
  • 青字の部分は既にファイル内含まれている場合があります。その場合は追加は不要です。
  • もし編集するファイル内に赤字のコードが含まれていれば、削除して下さい。

JavaScript コードの指定

上記で追加した <script> タグの後に ライトボックスの動作用のコードを追加します。以下の表示パターンにより、必要なタグを追加して下さい。

  1. Webページ上の全ての画像を拡大表示
  2. Webページ上の画像をグループ化して拡大表示
  3. インラインフレーム内に表示したサムネイル画像を拡大表示

Webページ上の全ての画像を拡大表示

Webページ上の全ての画像を拡大表示

一つのサムネイル画像をクリックした時に、そのページ内にある画像を全て拡大画像の前後リンクで表示するパターンです。

詳細ページや、一覧ページでも全て記事の画像を全てまとめて拡大表示したい場合は以下のコードを追加して下さい。

<script type="text/javascript">
$(document).ready(function(){
	/* ライトボックス */
    $('.image-link').lightbox(); 
});
</script>

Webページ上の画像をグループ化して拡大表示

Webページ上の画像をグループ化して拡大表示
全一覧(目次)や短い一覧(新着情報)上で1件分の記事の画像ごとに拡大画像を表示したい場合は以下のコードを追加して下さい。
<script type="text/javascript">
$(document).ready(function(){
	/* ライトボックス */
	//記事ごとにライトボックスによる拡大画像の表示をグループ化
	$('.sugu-entry').each(function(){
 		$('.image-link', this).lightbox(); 
	});
});
</script>

緑字の部分は、後で説明する「グループ化のための設定」で指定するクラス名と一致させて下さい。

インラインフレーム内に表示したサムネイル画像を拡大表示

インラインフレーム(アイフレーム、<iframe>)で短い一覧(新着情報)を表示させていたり、インラインフレーム内に記事ページを表示させていたりする場合に、まとめて拡大画像を表示する場合は以下のコードを追加の上、「調整内容」の調整を行って下さい。

<script type="text/javascript">
/* ライトボックス */
var NoticeCtl = {
	NoticeID:    "notice"     //インラインフレームのid属性
	,imageClass: "image-link" //画像のリンクに付けたクラス
	,entryClass: "sugu-entry" //記事1件に付けたクラス(グループ化する場合)
	,CalledSrc:  ""
	,LoadedSrc:  ""
};
function set_frame_lightbox(F){
	var myF = document.getElementById(F);
	var fDoc = myF.contentDocument || myF.contentWindow.document;
	if (
		NoticeCtl.CalledSrc!='' && NoticeCtl.CalledSrc == NoticeCtl.LoadedSrc && NoticeCtl.CalledSrc == fDoc.location.href
	){
		return;
	} else if (NoticeCtl.CalledSrc=='' && NoticeCtl.LoadedSrc!='' && NoticeCtl.LoadedSrc == fDoc.location.href){
		setTimeout(function(){
			set_frame_lightbox(F);
		}, 400);
	}
	if (fDoc.readyState == 'complete') {
		$('#'+F).contents().find('.'+NoticeCtl.imageClass).each(function(){
			$(this).attr("href", $(this).get(0).href);
		});

		//一覧(全一覧・短い一覧)を組み込み、記事ごとにライトボックスによる拡大画像の表示をグループ化
		/*
		$('#'+F).contents().find('.'+NoticeCtl.entryClass).each(function(){
			$('.'+NoticeCtl.imageClass, this).lightbox();
		});
		*/

		//全ての記事の画像をまとめて拡大画像の表示を循環させる場合(全一覧・短い一覧・詳細ページ)
		//この場合は読み込むページのテンプレートからはライトボックス設定を削除しておく必要があります。
	  	$('#'+F).contents().find('.'+NoticeCtl.imageClass).lightbox();

		NoticeCtl.CalledSrc = fDoc.location.href;
		NoticeCtl.LoadedSrc = fDoc.location.href;

		$('#'+F).contents().find('a:not([class~="'+NoticeCtl.imageClass+'"])').bind("click", function(){
			if (NoticeCtl.CalledSrc == $(this).get(0).href){
				return false;
			}
			NoticeCtl.CalledSrc = '';
			set_frame_lightbox(F);
		});
	} else {
		NoticeCtl.LBset = 0;
		setTimeout(function(){
			set_frame_lightbox(F);
		}, 400);
	}
}
$(document).ready(function(){
	set_frame_lightbox(NoticeCtl.NoticeID);
});
</script>

調整内容

  • インラインフレームには id属性を付け、そのid属性を赤字部分に設定して下さい。
  • 拡大画像へのリンクに付けるクラスを変更していたら、それに合わせて青字部分を変更て下さい。

画像をグループ化する場合

拡大する画像をグループ化して表示したい場合は、追加で以下の調整も行って下さい。

  • 上記に記載したコードの冒頭の緑字の部分を、後で説明する「グループ化のための設定」で指定するクラス名と一致させて下さい。
  • コードを切り替えるため、上記で追加したコードの中から下記の様に緑の取り消し線部分を削除して下さい。
//一覧(全一覧・短い一覧)を組み込み、記事ごとにライトボックスによる拡大画像の表示をグループ化
/*
$('#'+F).contents().find('.'+NoticeCtl.entryClass).each(function(){
	$('.'+NoticeCtl.imageClass, this).lightbox();
});
*/

//全ての記事の画像をまとめて拡大画像の表示を循環させる場合(全一覧・短い一覧・詳細ページ)
//この場合は読み込むページのテンプレートからはライトボックス設定を削除しておく必要があります。
$('#'+F).contents().find('.'+NoticeCtl.imageClass).lightbox();

グループ化のための設定

全一覧(目次)や短い一覧(新着情報)で拡大画像の表示を記事ごとにグループ化したい場合は、以下の編集も行って下さい。

グループ化編集対象ファイル

インラインフレームを使っている場合も、使っていない場合も同じファイルが編集対象です。

ページ 編集するテンプレートファイル
(templates/article 内)
全一覧(目次) webdir/index.html article_list.txt
短い一覧(新着情報) webdir/index_short.html short_list.txt

編集のポイント

記事1件分のコードがファイル内に記載されていますので、一番外側のタグに「sugu-entry」というクラスを追加して下さい(下記例緑字部分)。

もし1件分のコードが一つのHTMLタグ内にまとまっていなかったら一番外側を <div class="sugu-entry"> と </div> で囲って下さい。なお、具体的なHTMLコードは下記例に限りません。クラス追加の部分のみ編集して下さい。

<div class="pure-g sugu-entry">
	<div class="pure-u pure-u-1 sugu-entry-left">
		<h3 class=""><a href="%_to_article_%">%_subject_%</a> <small>(%_yyyy_%-%_mm_%-%_dd_%)</small></h3>
		<p>%_body_%</p>
	</div>
	<div class="pure-u pure-u-1 sugu-entry-left">
		<a class="image-link wrapper-h80" href="%_d_%/%_imagename_escaped_1_%" data-caption="%_imagetext_1_%" target="_blank">
		<img src="%_d_%/%_thumbnail_escaped_1_%" alt="%_imagetext_1_%">
		</a>
		 : (省略)
	</div>
</div><!-- /sugu-entry -->

もし一番外側のタグに既に class属性が設定されていれば、スペースに続けて「sugu-entry」を追加して下さい。class属性が複数あるとどちらかが無効になってしまうので注意して下さい。

また、このクラスは「すぐ使えるCGI」のバージョンによっては既に設定されている場合があります。設定されていれば追加する必要はありません。

アップロードと動作確認

全てのファイルの編集が終わったら、編集したファイルをサーバに上書きアップロードして下さい。

アップロード後「すぐ使えるCGI」の管理画面一覧から「再構築(テンプレート変更反映)」を行い、ブラウザのキャッシュを一旦クリアしてから動作確認を行って下さい。

さらに詳しく