###過去の質問
今までの二つの質問をさせていただき、無事にJavaScriptを利用して、連番のつく画像を正方形にトリミングし大量表表示することがきました。 ー 質問でできたところまでのLiveweave
ファイル名が連番な画像を表示する
JavaScriptで作成した画像をCSSでトリミングできない
##lightGalleryを使用したいが、JavaScriptで作成したコードには機能せず
目標としては、ギャラリー?のように写真を大量に表示させたいのです。
そこで、画像をトリミングしてしまって見えなくなった部分を見たり、ダウンロードできるさせるために、 lightGalleryというプラグインを入れよう思いました。
(本当は 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);
回答1件
あなたの回答
tips
プレビュー