HTML-CSS 入門講座

HTML-CSS 入門講座

WebParts-2
ライトボックス

目次

P2.1 はじめに

P2.1.1 概要

ライトボックスは、サムネイル画像をクリックさせて拡大画像を表示させる機能です。ギャラリーとも呼ばれます。

P2.2 ライトボックス

P2.2.1 Colorbox-1

(1) 説明

  • Colorbox を使用した写真ギャラリーです。
  • Colorbox は、モーダルウィンドウで写真を表示することができます。

(2) 表示形式

  • 写真をクリックしてモーダルウィンドウが表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
    モーダルウィンドウ(ギャラリー)の表示を指示します。
jQuery
個別ライブラリィ

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. Colorbox の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Download」ボタンをクリックしてください。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。Colorbox のダウンロードファイル内には、モーダルウィンドウの表示型式による複数のスタイルシートが格納されているので表示サンプルを確認しながら適切なスタイルシートをコピーしてください。また、ギャラリー表示する画像ファイルを「images」フォルダにコピーしてください。
  4. Colorbox のスタイルシートの中には、画像ファイル(images フォルダへのパスの記述がありますので画像ファイルの格納フォルダに合わせてパス指定を変更してください。
  5. head タグ内に「colorbox.css」の link タグ(※1)を記述してください。
  6. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  7. HTML ファイルの対象領域に表示定義(※3)を記述してください。画像ファイルのファイル名やタイトル名は、使用する画像ファイルに合わせて変更してください。
  8. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 02-lightbox/21-colorbox-1
    • index.html
    • css
      • colorbox.css
    • images
      • border.png
      • controls.png
      • loading.gif
      • loading_background.png
      • overlay.png
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
      • sample-06.jpg
    • js
      • jquery.colorbox-ja.js
      • jquery.colorbox-min.js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真ギャラリー(colorbox)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから(※1))▼▼▼ -->
<link rel="stylesheet" href="css/colorbox.css" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* 写真ギャラリー(colorbox)の設定 */
.colorbox {
	overflow: hidden;
}
.colorbox a {
	width: calc(100% / 6);				/* 写真の枚数 */
	padding: 5px;
	text-align: center;
	float: left;
}
@media screen and (max-width: 760px) {
	.colorbox a {
		width: calc(100% / 3);			/* 写真の枚数 */
		font-size: 0.6em;
	}
}
.colorbox a img {
	width: 100%;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- 写真ギャラリー(colorbox)の定義 -->
	<div class="colorbox">
		<a class="gallery" href="images/sample-01.jpg" title="アメリカ1"><img src="images/sample-01.jpg" alt="アメリカ1">アメリカ1</a>
		<a class="gallery" href="images/sample-02.jpg" title="アメリカ2"><img src="images/sample-02.jpg" alt="アメリカ2">アメリカ2</a>
		<a class="gallery" href="images/sample-03.jpg" title="ドイツ1"><img src="images/sample-03.jpg" alt="ドイツ1">ドイツ1</a>
		<a class="gallery" href="images/sample-04.jpg" title="ドイツ2"><img src="images/sample-04.jpg" alt="ドイツ2">ドイツ2</a>
		<a class="gallery" href="images/sample-05.jpg" title="シンガポール1"><img src="images/sample-05.jpg" alt="シンガポール1">シンガポール1</a>
		<a class="gallery" href="images/sample-06.jpg" title="シンガポール2"><img src="images/sample-06.jpg" alt="シンガポール2">シンガポール2</a>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- 写真ギャラリー(colorbox)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-ja.js" type="text/javascript"></script>
<script>
$(function() {
	$(".gallery").colorbox({
		rel: 'slideshow',
		slideshow: true,
		slideshowSpeed: 3000,
		maxWidth: "80%",
		maxHeight: "80%",
		opacity: 0.7
	});
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P2.2.2 lightbox-1

(1) 説明

  • lightbox を使用した写真ギャラリーですです。
  • lightbox は、モーダルウィンドウで写真を表示することができます。

(2) 表示形式

  • 写真をクリックしてモーダルウィンドウが表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
    モーダルウィンドウ(ギャラリー)の表示を指示します。
jQuery
個別ライブラリィ

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. lightbox の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Getting started」メニューをクリックし「Github Releases age」をクリック後に「Source code (zip)」をクリックしてダウンロードしてください。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。Colorbox のダウンロードファイル内の「dist」フォルダ内に必要ファイルが格納されています。
  4. head タグ内に「lightbox.min.css」の link タグ(※1)を記述してください。
  5. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。写真の枚数は、適時変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  6. HTML ファイルの対象領域に表示定義(※3)を記述してください。画像ファイルのファイル名やタイトル名は、使用する画像ファイルに合わせて変更してください。
  7. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 02-lightbox/22-lightbox-1
    • index.html
    • css
      • lightbox.min.css
    • images
      • close.png
      • loading.gif
      • next.png
      • prev.png
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
      • sample-06.jpg
    • js
      • jquery-3.6.0.min.js
      • lightbox.min.js
      • lightbox.min.map
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ライトボックス(lightbox)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link rel="stylesheet" href="css/lightbox.min.css" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* ライトボックス(lightbox)の設定 */
.wrapper {
	overflow: hidden;
}
.wrapper a {
	width: calc(100% / 6);				/* 写真の枚数 */
	padding: 5px;
	text-align: center;
	float: left;
}
@media screen and (max-width: 760px) {
	.wrapper a {
		width: calc(100% / 3);			/* 写真の枚数 */
		font-size: 0.6em;
	}
}
.wrapper a img {
	width: 100%;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- ライトボックス(lightbox.min.css)の定義 -->
	<div class="wrapper">
		<a href="images/sample-01.jpg" data-lightbox="demo-group" data-title="アメリカ1"><img src="images/sample-01.jpg" alt="アメリカ1">アメリカ1</a>
		<a href="images/sample-02.jpg" data-lightbox="demo-group" data-title="アメリカ2"><img src="images/sample-02.jpg" alt="アメリカ2">アメリカ2</a>
		<a href="images/sample-03.jpg" data-lightbox="demo-group" data-title="ドイツ1"><img src="images/sample-03.jpg" alt="ドイツ1">ドイツ1</a>
		<a href="images/sample-04.jpg" data-lightbox="demo-group" data-title="ドイツ2"><img src="images/sample-04.jpg" alt="ドイツ2">ドイツ2</a>
		<a href="images/sample-05.jpg" data-lightbox="demo-group" data-title="シンガポール1"><img src="images/sample-05.jpg" alt="シンガポール1">シンガポール1</a>
		<a href="images/sample-06.jpg" data-lightbox="demo-group" data-title="シンガポール2"><img src="images/sample-06.jpg" alt="シンガポール2">シンガポール2</a>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- ライトボックス(lightbox)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/lightbox.min.js" type="text/javascript"></script>
<script>
lightbox.option({
	'alwaysShowNavOnTouchDevices': false,	// trueにするとスマホでスライドの矢印を常に表示
	'albumLabel': "写真 %1 of %2",			// スライドの画像番号のテキストを変更できる
	'disableScrolling': false,				// trueにするとLightboxが開いている時はスクロール禁止
	'fadeDuration': 600, 					// Lightboxのフェードイン、フェードアウトの時間を指定
	'fitImagesInViewport': true,			// trueにするとLightbox画像が画面に収まるように縮小される
	'imageFadeDuration': 600,				// 読み込まれてから画像がフェードインするまでの時間を設定
	'maxWidth': 900,						// 画像の最大幅を設定
	'maxHeight': 900,						// 画像の最大高さを設定
	'positionFromTop': 50,					// Lightboxコンテナの表示領域上からの位置を設定
	'resizeDuration': 700,					// 異なるサイズの画像を表示する際のアニメーションの時間を設定
	'showImageNumberLabel': true,			// falseにすると画像番号が非表示になる
	'wrapAround': true,						// trueにすると最後のスライド画像の後に最初のスライド画像に戻る
})
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎