Добавить описание в лайтбокс изображения

Question

Я использую этот плагин лайтбоксе: 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; 
    }); 

}); 

HTML:

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

Answer 1

Я не смотрел на сценарий, но вы можете попробовать это:

var desc = ['some description title', 'another description title', 'etc']; 

    $('body').append(lightbox); 

    // fill lightbox with .lightboxTrigger hrefs in #imageSet 
    $('#imageSet').find('.lightboxTrigger').each(function(index) { 
    var $href = $(this).attr('href'); 
    $('#slideshow ul').append(
     '<li>' + 
     '<img src="' + $href + '">' + 
     '<span>' + desc[index] + '</span>' + 
     '</li>' 
    ); 
    });