JavaScriptで作成したHTMLにjQueryで効果をかけるには？

###過去の質問
今までの二つの質問をさせていただき、無事にJavaScriptを利用して、連番のつく画像を正方形にトリミングし大量表表示することがきました。ー質問でできたところまでのLiveweave

ファイル名が連番な画像を表示する
 JavaScriptで作成した画像をCSSでトリミングできない

##lightGalleryを使用したいが、JavaScriptで作成したコードには機能せず

目標としては、ギャラリー？のように写真を大量に表示させたいのです。

そこで、画像をトリミングしてしまって見えなくなった部分を見たり、ダウンロードできるさせるために、 lightGalleryというプラグインを入れよう思いました。
（本当は lightGallery を入れようとしてこのような経緯に至ったのですが）

jQueryプラグイン - lightGallery

しかし、HTML上で作成したコードでの動作はできたのですが、JavaScriptで作成したコードでは動作しません。
そこを動作させるためにはどうすればいいのでしょうか。

######動作するHTML

HTML
1<div id="lightgallery">
2<div class="gallery-image"><a href="https://placehold.jp/ff4747/ffffff/100x100.png?text=test.jpg"><img src="https://placehold.jp/ff4747/ffffff/100x100.png?text=test.jpg"></a></div><br>

######連続した画像を追加するためのJavaScript

JavaScript
1document.addEventListener("DOMContentLoaded", function () {
2for (i = 1; i <= 10; i++)  {
3document.getElementById("lightgallery").insertAdjacentHTML('beforeend',
4'<div class="gallery-image">' +
5'<a href="https://placehold.jp/ff4747/ffffff/100x100.png?text=' + i + '.jpg">' +
6'<img src="https://placehold.jp/ff4747/ffffff/100x100.png?text=' + i + '.jpg">' +
7'</a>' +
8'</div>');
9}
10}, false);

退会済みユーザー

2017/01/21 18:37

該当箇所のソースコードを添付したほうが、回答が得られやすいと思います

2001Y

2017/01/21 18:39

追記でLiveweaveを加えたのですが、表示されていないでしょうか。

kei344

2017/01/21 18:43

プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）また、LiveweaveだけでなくHTML/CSS/JavaScriptも質問文内に掲載されてはいかがでしょうか。

s8_chu

2017/01/21 18:45

lightGalleというプラグインのURLを質問文に追記していただけませんか？

2001Y

2017/01/21 18:47

HTML/CSS/JavaScript・プラグインURLを追加させていただきました。情報不足で申し訳ありません。

kei344

2017/01/21 19:33

「lightGalle」ではなく「lightGallery」ですので、修正お願いします。

2001Y

2017/01/22 01:19

ほんとですね。。。申し訳ないです。

行動規範の内容に同意します

回答1件

ベストアンサー

id="lightgallery"を適用した要素内にaタグ、imgタグ以外が入っていると、lightgalleryは正常に動作しなくなるようです。いかのようにすると動作すると思います。

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.7/css/lightgallery.css">
7    <style type="text/css">
8        .gallery-image {
9            width: 100px;
10            height: 100px;
11            overflow: hidden;
12            display: inline-block;
13            margin: 5px;
14        }
15
16        .gallery-image img {
17            width: auto;
18            height: 100px;
19            overflow: hidden;
20        }
21    </style>
22</head>
23<body>
24<div id="lightgallery">
25</div>
26<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
27<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.7/js/lightgallery.js"></script>
28<script>
29    document.addEventListener("DOMContentLoaded", function () {
30        for (i = 1; i <= 10; i++) {
31            document.getElementById("lightgallery").insertAdjacentHTML('beforeend',
32                '<a href="https://placehold.jp/ff4747/ffffff/100x100.png?text=' + i + '.jpg" class="gallery-image">' +
33                '<img src="https://placehold.jp/ff4747/ffffff/100x100.png?text=' + i + '.jpg">' +
34                '</a>');
35        }
36    }, false);
37    $(document).ready(function () {
38        $("#lightgallery").lightGallery();
39    });
40</script>
41</body>
42</html>