title: Adding descriptions inside a blueimp gallery
body: <p>I am using a <a href="https://github.com/blueimp/Gallery/blob/master/README.md" rel="noreferrer">BlueImp Gallery</a> to add lightboxes to my image gallery. So, when you click on an image thumbnail, it launches a lightbox with a larger version of the image etc.</p>
  
  <p>I also want to add in some descriptive text and a button to each slide of the lightbox, but I am having trouble making it work. It won't show the placeholder descriptions that I have added in.</p>
  
  <p>Here's what I have so far;</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="blueimp-gallery" class="blueimp-gallery"&gt;
      &lt;!-- The container for the modal slides --&gt;
      &lt;div class="slides"&gt;&lt;/div&gt;
      &lt;!-- Controls for the borderless lightbox --&gt;
      &lt;h3 class="title"&gt;&lt;/h3&gt;
      &lt;p class="description"&gt;&lt;/p&gt;
      &lt;a class="prev"&gt;‹&lt;/a&gt;
      &lt;a class="next"&gt;›&lt;/a&gt;
      &lt;a class="close"&gt;×&lt;/a&gt;
      &lt;a class="play-pause"&gt;&lt;/a&gt;
      &lt;ol class="indicator"&gt;&lt;/ol&gt;
  
      &lt;div class="modal fade"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body next"&gt;&lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default pull-left prev"&gt;
                          &lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;
                          Previous
                      &lt;/button&gt;
                      &lt;button type="button" class="btn btn-primary next"&gt;
                          Next
                          &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="links"&gt;
  
  &lt;div class="row prints"&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div class="thumbnail"&gt;    
        &lt;div class="caption"&gt;
          &lt;a href="http://farm3.staticflickr.com/2843/10406026526_4cd1b56391.jpg" title="Ballooning" data-description="This is a banana." data-gallery&gt;
            &lt;img src="http://farm8.staticflickr.com/7389/10404414563_0914b69e0e.jpg" alt="Ballooning"&gt;
          &lt;/a&gt;
          &lt;h3&gt;Ballooning&lt;/h3&gt;
          &lt;p&gt;from $18.00&lt;/p&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-YLP"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="col-md-4"&gt;
      &lt;div class="thumbnail"&gt;    
        &lt;div class="caption"&gt;  
          &lt;a href="http://farm6.staticflickr.com/5547/10406009404_c197c2221b.jpg" title="Clearing" data-description="This is a apple." data-gallery&gt;
              &lt;img src="http://farm6.staticflickr.com/5490/10404414523_745ea3065d.jpg" alt="Clearing"&gt;
          &lt;/a&gt; 
          &lt;h3&gt;Clearing&lt;/h3&gt;
          &lt;p&gt;from $18.00&lt;/p&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-YLP"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div class="thumbnail"&gt;    
        &lt;div class="caption"&gt;              
          &lt;a href="http://farm6.staticflickr.com/5510/10406026066_7f95a075ee.jpg" title="Sky/Sea" data-description="This is a cherry." data-gallery&gt;
              &lt;img src="http://farm4.staticflickr.com/3769/10404249505_d767f7c420.jpg" alt="Sky/Sea"&gt;
          &lt;/a&gt;
          &lt;h3&gt;Sky/Sea&lt;/h3&gt;
          &lt;p&gt;from $18.00&lt;/p&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-YLP"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="col-md-4"&gt;
      &lt;div class="thumbnail"&gt;    
        &lt;div class="caption"&gt;          
          &lt;a href="http://farm4.staticflickr.com/3678/10406009004_5c625e2028.jpg" title="Lights" data-description="This is a grapefruit." data-gallery&gt;
              &lt;img src="http://farm3.staticflickr.com/2814/10404249395_9e4cae5bc7.jpg" alt="Lights"&gt;
          &lt;/a&gt;
          &lt;h3&gt;Lights&lt;/h3&gt;
          &lt;p&gt;from $18.00&lt;/p&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-YLP"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="col-md-4"&gt;
      &lt;div class="thumbnail"&gt;    
        &lt;div class="caption"&gt;          
          &lt;a href="http://farm6.staticflickr.com/5538/10406019875_8424fbee11.jpg" title="Silhouettes" data-description="This is a orange." data-gallery&gt;
              &lt;img src="http://farm8.staticflickr.com/7343/10404255766_d808d1902d.jpg" alt="Silhouettes"&gt;
          &lt;/a&gt;
          &lt;h3&gt;Silhouettes&lt;/h3&gt;
          &lt;p&gt;from $18.00&lt;/p&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-YLP"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;   
    &lt;div class="col-md-4"&gt;
      &lt;div class="thumbnail"&gt;    
        &lt;div class="caption"&gt;         
          &lt;a href="http://farm4.staticflickr.com/3682/10406009134_3b666324ff.jpg" title="Sway" data-description="This is a kiwi." data-gallery&gt;
              &lt;img src="http://farm6.staticflickr.com/5516/10404249545_7efb481042.jpg" alt="Sway"&gt;
          &lt;/a&gt;
          &lt;h3&gt;Sway&lt;/h3&gt;
          &lt;p&gt;from $18.00&lt;/p&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-YLP"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="col-md-4"&gt;
      &lt;div class="thumbnail"&gt;    
        &lt;div class="caption"&gt;          
          &lt;a href="http://farm8.staticflickr.com/7425/10406019935_1def1e0c09.jpg" title="Sunset" data-description="This is a grape." data-gallery&gt;
              &lt;img src="http://farm3.staticflickr.com/2810/10404249465_0124b7f3e5.jpg" alt="Sunset"&gt;
          &lt;/a&gt;
          &lt;h3&gt;Sunset&lt;/h3&gt;
          &lt;p&gt;from $18.00&lt;/p&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-YLP"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="col-md-4"&gt;
      &lt;div class="thumbnail"&gt;    
        &lt;div class="caption"&gt;          
          &lt;a href="http://farm6.staticflickr.com/5532/10406009324_4cd1b56391.jpg" title="Lighthouse" data-description="This is a strawberry." data-gallery&gt;
              &lt;img src="http://farm6.staticflickr.com/5543/10404240054_6261498220.jpg" alt="Lighthouse"&gt;
          &lt;/a&gt;
          &lt;h3&gt;Lighthouse&lt;/h3&gt;
          &lt;p&gt;from $18.00&lt;/p&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-YLP"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt; 
    &lt;div class="col-md-4"&gt;
      &lt;div class="thumbnail"&gt;    
        &lt;div class="caption"&gt;           
          &lt;a href="http://farm4.staticflickr.com/3747/10406026506_6a4dbf2df0.jpg" title="Slabs"data-description="This is a pineapple." data-gallery&gt;
              &lt;img src="http://farm8.staticflickr.com/7345/10404249655_7512bf6565.jpg" alt="Slabs"&gt;
          &lt;/a&gt;
          &lt;h3&gt;Slabs&lt;/h3&gt;
          &lt;p&gt;from $18.00&lt;/p&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-YLP"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;        
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.blueimp-gallery &gt; .description {
    position: absolute;
    top: 30px;
    left: 15px;
    color: red;
    display: none;
  }
  
  .blueimp-gallery-controls &gt; .description {
    display: block;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>blueimp.Gallery(
      document.getElementById('links'),
      {
          onslide: function (index, slide) {
              var text = this.list[index].getAttribute('data-description'),
                  node = this.container.find('.description');
              node.empty();
              if (text) {
                  node[0].appendChild(document.createTextNode(text));
              }
          }
      }
  );
  </code></pre>
  
  <p>And in my body (gallery.js is the file where I've added the above JS):</p>
  
  <pre><code>  &lt;script src="//code.jquery.com/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="lib/fancybox/jquery.fancybox.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap-image-gallery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/gallery.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Any pointers on where I've gone wrong would be much appreciated!</p>