Adding descriptions inside a blueimp gallery

Question

I am using a BlueImp Gallery to add lightboxes to my image gallery. So, when you click on an image thumbnail, it launches a lightbox with a larger version of the image etc.<

Answer 1

That works only for the first link...

I am trying to get it to work with html in the data-description. I have it working and pulling in the decsription text, but how do you parse the html to work as a link?

http://jsfiddle.net/LXp76/

<a href="http://lorempixel.com/200/200/"  title="This is the title element 1" data-gallery="1" data-description="This is a description.<a href='http://google.com' target='_blank' class='btn btn-warning'>This is link 1</a>"><img src="http://lorempixel.com/80/80/" alt="" ></a>

here it is working with FancyBox, http://jsfiddle.net/yShjB/2/

but I would much rather use the BlueImp Gallery..

Answer 2

Sorry if to late but I find a way to do this, only change the JS from:

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

to this:

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

Answer 3

You can pass any needed data on a element, and then display it in the gallery. I spend a lot of time trying to find an answer, so I'll leave it here. Here is an example:

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>

JS:

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: You can use .scss to refactor it, but it's just for example

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

Answer 4

use

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

Answer 5

          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/25/

Have a look at this one, it is a working one. Just check what you've done wrong compared to mine.