how to place caption/title right below content on fancybox?

Question

Current Fancybox version places caption at the bottom of the window, not right below bottom side of the image. I'm trying to ask the developer too but I guess I won't get fast answers.

The are also some questions here for this issue, but it seems the suggestions found do not work anymore, for example by usign title or data-fancybox-title .

I also tried to mod the template (there's an instance option for that), but it doesn't work.

So, is there some hidden ways to do it?

Answer 1

For the caption thing: remove the caption from the template, then manually retrieve it afterLoad:

$('[data-fancybox]').fancybox({
  baseTpl:
    '<div class="fancybox-container" role="dialog" tabindex="-1">' +
    '<div class="fancybox-bg"></div>' +
    '<div class="fancybox-inner">' +
    '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' +
    '<div class="fancybox-toolbar">{{buttons}}</div>' +
    '<div class="fancybox-navigation">{{arrows}}</div>' +
    '<div class="fancybox-stage"></div>' +
    '</div>' +
    '</div>'

  ,afterLoad : function(fb, item){
    item.$content.remove('.fb-caption').append('<div class="fb-caption">' + $(item.$thumb.context).data('caption') + '</div>');
  }
}

CSS:

.fb-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  z-index: 99996;
  pointer-events: none;
  text-align: center;
  transition: opacity 200ms;
  background: none;
}