lightgallery typeError images not loading?

Question

I have a bootstrap page and I downloaded jquery plugin (lightgallery.js) and plugins works very well with theese codes;

    <div class="item active" id="lightgallery">
     <a href="http://s.fotorama.io/1.jpg">
      <img src="http://s.fotorama.io/1.jpg" alt="...">
     </a>
      <a href="http://s.fotorama.io/2.jpg">
         <img src="http://s.fotorama.io/2.jpg" alt="...">
       </a>
    </div>

and this is my jquery function to work plugin

 $('#lightgallery').lightGallery();

it's good but if I change my html structure plugin is not work

my html structure is below;

<div id="lightgallery">

  <div class="item active">
    <a href="http://s.fotorama.io/1.jpg">
       <img src="http://s.fotorama.io/1.jpg" alt="...">
    </a>
    </div>

    <div class="item">
      <a href="http://s.fotorama.io/2.jpg">
         <img src="http://s.fotorama.io/2.jpg" alt="...">
       </a>
      </div>
</div>

Answer 1

Use a list like this..

<ul id="lightgallery">
    <li class="item active">
        <a href="http://s.fotorama.io/1.jpg">
            <img src="http://s.fotorama.io/1.jpg">
        </a>
    </li>
    <li class="item">
        <a href="http://s.fotorama.io/2.jpg">
            <img src="http://s.fotorama.io/2.jpg">
        </a>
    </li>
</ul>