Showing description in lightbox using Jquery plugin blueimp gallery

问题

So what i want to do is add a description to the lightbox gallery.

I am using jquery plugin blueimp image gallery and also the bootstrap image gallery plugin over the top. I've searched everywhere but there were only a few posts about it other than what is mentioned within the instructions of the documentation, so figured i'd ask.

i'm sure that's probably whats causing the problem but first i'd like to know if there is a way to add a description preferably underneath the image, it can be under the title too though.

this is the furthest i have got with it using the code below from the blueimp documentation and an additional extra i found from another user demonstrated in the jsfiddle.

      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));
          }
          }
      });

http://jsfiddle.net/2B3bN/37/

this shows how it looks on my webpage, i did manage to implement this but you will however notice that it only works for the first image.

Surely this can be amended with some js? I'm pretty new to js i can read and amend basic js but i'm guessing the same way they change the title can be used to change the description?

Thanks for all the help guys!

回答1:

In case you still need this:

$('#blueimp-gallery').on('slide', function (event, index, slide) {
$(this).children('.description')
    .text($('#links a').eq(index).data('description'));
});

来源：https://stackoverflow.com/questions/21142203/showing-description-in-lightbox-using-jquery-plugin-blueimp-gallery