JavaScript jQueryのライブラリ「LightBox2」でJavascriptからの画像追加のテスト

2023/10/19

画像ファイルをHTMLに記述して拡大表示を行う場合に良く使う「LightBox2」で、 Javascriptのプログラムから画像追加のテストを行ってみました。

「LightBox2」と1個の画像のみの表示の場合は、以下の様な感じでHTMLを作れば画像の拡大表示ができます。

■LightBox2の例

<!DOCTYPE html>
<head>
<link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script>
<script>
//  lightbox start
$(function() {
	lightbox.option({
		"positionFromTop": 150,
	});
});
</script>

</head>
<body>
<h1>LightBox2-TEST</h1>
<a href="./test-1.jpg" data-lightbox="album" >
  <img src="./test-1.jpg" id="" width="100" >
</a>
</body>
</html>

上のHTMLでは特に難しくはありませんでした。そこで、このHTMLにボタンと、10個の適当な画像ファイル（add-1.jpg ～add-10.jpg）を用意して、そのボタンをクリックすることで、上記の「test-1.jpg」のファイルの後ろに表示する様にしてみます。

画像ファイルの指定を追加しやすくするために、<div id="imgdiv"></div> で囲っています。
この35行は、divタグ、aタグ、imgタグを1行で記述していますが、こうしないと余計なキャプションが付くための対策です。

■LightBox2の例・その２

<!DOCTYPE html>
<head>
<link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script>

<script>
//  lightbox start
$(function() {
	lightbox.option({
		"positionFromTop": 150,
	});
});

$(function() {
	$("#btn").on('click', function() {
		for (i = 1; i <= 10; i++) {
			var add = "";
			add += '<a href="./add-'+i+'.jpg" data-lightbox="album" >';
			add += '<img src="./add-'+i+'.jpg" width="100" >';
			add += '</a>';
			$("#imgdiv").append(add);
		}

	});

});
</script>

</head>
<body>
<h1>LightBox2-TEST</h1>
<button id="btn">add image</button>  

<div id="imgdiv"><a href="./test-1.jpg" data-lightbox="album"><img src="./test-1.jpg" width="100"></a></div>
</body>
</html>

「add image」をクリックする前の表示は以下の通りです。