-1

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?

Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118
  • 1
    You need to share what you've tried so far - https://stackoverflow.com/help/minimal-reproducible-example – nimsrules Jun 18 '19 at 10:33
  • 1
    create your own template with the `baseTpl:` option or use `afterShow` or `beforeShow` to move the caption into the content – Pete Jun 18 '19 at 10:35
  • @Nimrules: do you really want/need me to write a link with a tile or data-fancybox-title on it? – Luca Reghellin Jun 18 '19 at 10:44

1 Answers1

0

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;
}
Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118