fancybox 3 add titles for thumbnails

Question

I'm using fancybox 3 for my app and I want to add titles for each thumbnail, already I have captions for images. But I want to add those captions as titles for thumbnails so I can see titles when I hover on each thumbnail. Is there any option for fancybox thumbnails to add titles or tooltips?

view fancybox thumbnail

I only found these options

thumbs: {
  autoStart: false,
  hideOnClose: true, 
  parentEl: '.fancybox-container',
  axis: 'y'
},

score 0 · Answer 1 · answered Aug 28 '18 at 22:04

I don't think there's a proper solution. I had to hack this together myself. Basically, just add some HTML in the data-caption attribute, and then style it with CSS. You should be able to add the caption through JS as well.

  .fancybox-inner .slide-title {
    position: fixed;
    top: 11px;
    left: 50%;
    transform: translate(-50%, -0%));
  }

<a href="img.jpg" data-fancybox="gallery" data-caption="<span class='slide-title'>MY Title</span> My Caption Text">
  My fancybox init text
</a>

fancybox 3 add titles for thumbnails

1 Answers1