使用Jquery插件blueimp库在灯箱中显示说明 [英] Showing description in lightbox using Jquery plugin blueimp gallery

问题描述

所以我要做的是向灯箱图库添加说明.

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

我正在使用jquery插件blueimp图像库以及顶部的bootstrap图像库插件.我到处搜索过，但除文档说明中提到的内容外，只有几篇关于它的文章，所以我想问一下.

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.

这是我使用blueimp文档中的以下代码获得的最大收益，以及我在jsfiddle中从另一个用户那里发现的其他收益.

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.

当然可以用一些js修改它吗?我对js很陌生，我可以阅读和修改基本的js，但是我猜想它们更改标题的方式可以用来更改描述?

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?

感谢所有帮助人员！

推荐答案

如果您仍然需要此:

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

这篇关于使用Jquery插件blueimp库在灯箱中显示说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！