回答編集履歴

1 編集

s8_chu

s8_chu score 13473

2017/01/22 04:23  投稿

lightgalleryクラス内にaタグ、imgタグ以外が入っていると正常に動作しなくなるようです。いかのようにすると動作すると思います。
id="lightgallery"を適用した要素内にaタグ、imgタグ以外が入っていると、lightgalleryは正常に動作しなくなるようです。いかのようにすると動作すると思います。
```HTML
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>タイトル</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.7/css/lightgallery.css">
   <style type="text/css">
       .gallery-image {
           width: 100px;
           height: 100px;
           overflow: hidden;
           display: inline-block;
           margin: 5px;
       }
       .gallery-image img {
           width: auto;
           height: 100px;
           overflow: hidden;
       }
   </style>
</head>
<body>
<div id="lightgallery">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.7/js/lightgallery.js"></script>
<script>
   document.addEventListener("DOMContentLoaded", function () {
       for (i = 1; i <= 10; i++) {
           document.getElementById("lightgallery").insertAdjacentHTML('beforeend',
               '<a href="https://placehold.jp/ff4747/ffffff/100x100.png?text=' + i + '.jpg" class="gallery-image">' +
               '<img src="https://placehold.jp/ff4747/ffffff/100x100.png?text=' + i + '.jpg">' +
               '</a>');
       }
   }, false);
   $(document).ready(function () {
       $("#lightgallery").lightGallery();
   });
</script>
</body>
</html>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る