title: lightbox 2: how to add dynamically images via javascript
body: <p>I'm having trouble attempting to <strong>dynamically add images</strong>, since <strong>lightbox2</strong> (by lokesh dakar) is initialized after document load by existent html coded images and it doesn't parse the document anymore after the first time.</p>
  
  <p>If i try to add new images with javascript (appending them in the body for example) they are not added to the lighbox groups.</p>
  
  <p>Documentation in official website doesn't seems to describe any scripted method</p>
  
  <p>Anyone with experience can help me? solution with <strong>jquery</strong> are really welcome, but i can handle well <strong>vanilla</strong> js too.</p>
  
  <hr>
  
  <p>Code sample:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
   &lt;div id="container"&gt;
    &lt;a href="images/image-2.jpg" data-lightbox="roadtrip"&gt;Image #2&lt;/a&gt;
    &lt;a href="images/image-3.jpg" data-lightbox="roadtrip"&gt;Image #3&lt;/a&gt;
    &lt;a href="images/image-4.jpg" data-lightbox="roadtrip"&gt;Image #4&lt;/a&gt;
   &lt;/div&gt;
   &lt;!-- where 'Image #X' = &lt;img src="images/thumb/image-X.jpg&gt;" --&gt;
   &lt;div id="loadmore"&gt;load more images&lt;/div&gt;
   &lt;script src="path/to/lightbox.js"&gt;&lt;/script&gt;
   &lt;script&gt;
    /* see below for the script */
   &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>$(function(){
    $('#loadmore').click(function(){
     //ajax request for more images.
     //load them with all the needed properties...
     //then put them into the container:
     var IMG = $('&lt;a href="images/image-10.jpg" data-lightbox="roadtrip"&gt;'+
         '&lt;img src="images/small/image-10.jpg"&gt;'+
       '&lt;/a&gt;');
     //magic here... add IMG to roadtrip lightbox group!!!
     //probably something like lightbox.groups['roadtrip'].add(IMG)
     //but i'm only speculating
     $('#container').append(IMG)
    });
  })
  </code></pre>