Javascript 在blueimp库中添加描述

我正在使用将灯箱添加到我的图像库中。因此，当您单击图像缩略图时，它会启动一个带有更大版本图像的lightbox等

我还想在lightbox的每个幻灯片中添加一些描述性文本和按钮，但我在使其工作时遇到了困难。它不会显示我添加的占位符描述

这是我到目前为止所拥有的

HTML:

JS:

在我的身体中（gallery.js是我添加上述js的文件）：

任何关于我错在哪里的指点都将不胜感激

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

看看这个，这是一个有效的。 与我的相比，检查一下你做错了什么。

使用

document.getElementById('links').getElementsByTagName('a') or .children() 

---

这只适用于第一个链接

我试图让它在数据描述中使用html。我有它的工作和拉在decsription文本，但你如何解析html工作作为一个链接

“>

在这里，它与FancyBox一起工作

---

但我更愿意使用BlueImp Gallery..

抱歉，如果迟到了，但我找到了一种方法，只将JS从：

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

为此：

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].innerHTML = text;
            }
        }
    }
);

---

您可以在

元素上传递所需的任何数据，然后将其显示在库中。
我花了很多时间试图找到答案，所以我把它留在这里。
以下是一个例子：

HTML:

<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <p class="description"></p>
    <p class="example"></p>
    ...
</div>
------
<div id="links">
    <a href="images/banana.jpg" title="Banana" data-description="This is a banana." data-example="Additional data">Banana</a>
    <a href="images/apple.jpg" title="Apple" data-description="This is an apple." data-example="Additional data">Apple</a>
</div>

document.getElementById('links').onclick = function (event) {
  event = event || window.event;
  var target = event.target || event.srcElement,
    link = target.src ? target.parentNode : target,
    options = {
      index: link, event: event,
      onslide: function (index, slide) {

        self = this;
        var initializeAdditional = function (index, data, klass, self) {
          var text = self.list[index].getAttribute(data),
            node = self.container.find(klass);
          node.empty();
          if (text) {
            node[0].appendChild(document.createTextNode(text));
          }
        };
        initializeAdditional(index, 'data-description', '.description', self);
        initializeAdditional(index, 'data-example', '.example', self);
      }
    },
    links = this.getElementsByTagName('a');
  blueimp.Gallery(links, options);
};

CSS:
您可以使用
.scss
对其进行重构，但这只是一个示例

.blueimp-gallery > .description, .blueimp-gallery > .example {
  position: absolute;
  top: 30px;
  left: 15px;
  color: #fff;
  display: none;
}
.blueimp-gallery-controls > .description, .blueimp-gallery-controls > .example {
  display: block;
}

node[0]
需要是
node[index]
，查看此链接
node[0]
需要是
node[index]
。查看此链接jsfiddle.net/skyuuka/2B3bN/128谢谢你的js为我工作。不知道为什么blueimp会在他的github上放一个坏掉的js！
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));
            }
        }
    }
);

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].innerHTML = text;
            }
        }
    }
);

<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <p class="description"></p>
    <p class="example"></p>
    ...
</div>
------
<div id="links">
    <a href="images/banana.jpg" title="Banana" data-description="This is a banana." data-example="Additional data">Banana</a>
    <a href="images/apple.jpg" title="Apple" data-description="This is an apple." data-example="Additional data">Apple</a>
</div>

document.getElementById('links').onclick = function (event) {
  event = event || window.event;
  var target = event.target || event.srcElement,
    link = target.src ? target.parentNode : target,
    options = {
      index: link, event: event,
      onslide: function (index, slide) {

        self = this;
        var initializeAdditional = function (index, data, klass, self) {
          var text = self.list[index].getAttribute(data),
            node = self.container.find(klass);
          node.empty();
          if (text) {
            node[0].appendChild(document.createTextNode(text));
          }
        };
        initializeAdditional(index, 'data-description', '.description', self);
        initializeAdditional(index, 'data-example', '.example', self);
      }
    },
    links = this.getElementsByTagName('a');
  blueimp.Gallery(links, options);
};

.blueimp-gallery > .description, .blueimp-gallery > .example {
  position: absolute;
  top: 30px;
  left: 15px;
  color: #fff;
  display: none;
}
.blueimp-gallery-controls > .description, .blueimp-gallery-controls > .example {
  display: block;
}