lightgallery.jsが動作しない。（jQuery版は動作する）

前回、同じ題名で質問させていただき、無事jQuery依存でないlightgallery.jsを利用して表示させることができました。

しかし、JavaScriptを使用して連番を使用したURLを作成した場合うまく動作しませんでした。
このJavaScriptは過去の質問で教えていただいたコードです。

JavaScript
1document.addEventListener("DOMContentLoaded", function() {
2  for (i = 1; i <= 100; i++) {
3    document.getElementById("lightgallery").insertAdjacentHTML('beforeend', '<a href="//placehold.jp/3e80e4/ffffff/500x300.png?text=' + i + '.jpg" class="gallery-img" download>' + '<img data-src="//placehold.jp/3e80e4/ffffff/500x300.png?text=' + i + '.jpg" class="lazyload" data-adaptive-background>' + '</a>');
4  }
5}, false);

これにlightgallery.jsの起動するためにlightGallery(document.getElementById('lightgallery'));を追加しました。

動作確認

できればjQueryを使用しないサイト作りを試しているので、もしわかるようでしたら教えていただければ幸いです。

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

回答2件

lightgallery.jsの推奨するマークアップを使うと動作しましたが、このような挙動でしょうか？

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <link rel="stylesheet" href="https://cdn.jsdelivr.net/lightgallery.js/1.0.1/css/lightgallery.min.css">
5    <meta charset="UTF-8">
6    <title>タイトル</title>
7    <style type="text/css">
8        * {
9            margin: 0;
10            padding: 0;
11        }
12
13        a {
14            display: block;
15            margin-bottom: 5px;
16        }
17    </style>
18</head>
19<body>
20<script src="https://cdn.jsdelivr.net/lightgallery.js/1.0.1/js/lightgallery.min.js"></script>
21<script>
22    document.addEventListener("DOMContentLoaded", function () {
23        document.body.insertAdjacentHTML("beforeend", '<div id="lightgallery"></div>');
24        for (i = 1; i <= 13; i++) {
25            document.getElementById("lightgallery").insertAdjacentHTML('beforeend', '<a href="https://placehold.jp/ff4747/ffffff/150x150.png?text=' + i + '.jpg"><img src="https://placehold.jp/ff4747/ffffff/150x150.png?text=' + i + '.jpg"></a>');
26        }
27        lightGallery(document.getElementById('lightgallery'));
28    }, false);
29</script>
30</body>
31</html>

投稿2017/02/28 11:18

s8_chu

総合スコア14731

2001Y

2017/02/28 12:02

lightGallery(document.getElementById('lightgallery')); のいちは間違っていましたがCSSのいちなどはあってました。想像通りに動いたのでありがとうございました！！

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

ベストアンサー

JavaScript
1document.addEventListener("DOMContentLoaded", function() {
2  for (i = 1; i <= 100; i++) { document.getElementById("lightgallery").insertAdjacentHTML('beforeend', '<a href="//placehold.jp/3e80e4/ffffff/500x300.png?text=' + i + '.jpg" class="gallery-img" download>' + '<img src="//placehold.jp/3e80e4/ffffff/50x30.png?text=' + i + '.jpg"  data-src="//placehold.jp/3e80e4/ffffff/500x300.png?text=' + i + '.jpg" class="lazyload" data-adaptive-background>' + '</a>');
3  }
4lightGallery(document.getElementById('lightgallery'));//←位置の問題
5}, false);
6```**動くサンプル：**[https://jsfiddle.net/udsxbckx/1/](https://jsfiddle.net/udsxbckx/1/)