为灯箱图像添加描述

我正在使用这个灯箱插件:http://s.codepen.io/schadeck/pen/gjbqr

我想知道是否有任何方法在我当前的代码中添加一个简单的描述属性。

我想要实现的是在灯箱中图像底部的描述文本。我已经寻找了一个解决方案，但似乎没有适用于我正在使用的lightbox.js脚本。

代码如下:

jQuery(document).ready(function($) {
  // global variables for script
  var current, size;
  $('.lightboxTrigger').click(function(e) {
    // prevent default click event
    e.preventDefault();
    // grab href from clicked element
    var image_href = $(this).attr("href");  
    // determine the index of clicked trigger
    var slideNum = $('.lightboxTrigger').index(this);
    // find out if #lightbox exists
    if ($('#lightbox').length > 0) {        
      // #lightbox exists
      $('#lightbox').fadeIn(300);
      // #lightbox does not exist - create and insert (runs 1st time only)
    } else {                                
      // create HTML markup for lightbox window
      var lightbox =
          '<div id="lightbox">' +
          '<p>Clique para fechar</p>' +
          '<div id="slideshow">' +
          '<ul></ul>' +        
          '<div class="nav">' +
          '<a href="#prev" class="prev slide-nav">Anterior</a>' +
          '<a href="#next" class="next slide-nav">Proxima</a>' +
          '</div>' +
          '</div>' +
          '</div>';
      //insert lightbox HTML into page
      $('body').append(lightbox);
      // fill lightbox with .lightboxTrigger hrefs in #imageSet
      $('#imageSet').find('.lightboxTrigger').each(function() {
        var $href = $(this).attr('href');
        $('#slideshow ul').append(
          '<li>' +
          '<img src="' + $href + '">' +
          '</li>'
        );
      });
    }
    // setting size based on number of objects in slideshow
    size = $('#slideshow ul > li').length;
    // hide all slide, then show the selected slide
    $('#slideshow ul > li').hide();
    $('#slideshow ul > li:eq(' + slideNum + ')').show();
    // set current to selected slide
    current = slideNum;
  });
  //Click anywhere on the page to get rid of lightbox window
  $('body').on('click', '#lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues
    $('#lightbox').fadeOut(300);
  });
  // show/hide navigation when hovering over #slideshow
  $('body').on(
    { mouseenter: function() {
      $('.nav').fadeIn(300);
    }, mouseleave: function() {
      $('.nav').fadeOut(300);
    }
    },'#slideshow');
  // navigation prev/next
  $('body').on('click', '.slide-nav', function(e) {
    // prevent default click event, and prevent event bubbling to prevent lightbox from closing
    e.preventDefault();
    e.stopPropagation();
    var $this = $(this);
    var dest;
    // looking for .prev
    if ($this.hasClass('prev')) {
      dest = current - 1;
      if (dest < 0) {
        dest = size - 1;
      }
    } else {
      // in absence of .prev, assume .next
      dest = current + 1;
      if (dest > size - 1) {
        dest = 0;
      }
    }
    // fadeOut curent slide, FadeIn next/prev slide
    $('#slideshow ul > li:eq(' + current + ')').fadeOut(750);
    $('#slideshow ul > li:eq(' + dest + ')').fadeIn(750);
    // update current slide
    current = dest;
  });
});

<ul id="imageSet">
<li><a href="" class="lightboxTrigger"><img src="" title=""></a></li>
</ul>