please enhance caption to v3 level

[hanscees]

Hi,

I have nice pages here, where version three alas has a nasty bug (won't load beyond fourth image when swiping.) https://www.bomengids.nl/2022/species/Tulpenboom__Liriodendron_tulipifera__Tulip_tree__Amerikanischer_Tulpenbaum__Tulipier_de_Virginie.html

Fancybox four has no such bug, but alas only has

caption= "some text"

and not the much more elaborate <lightbox_caption>

lots of html here

</lightbox_caption>

Just to let you know the version three option is much easier to work with. Any workaround would be nice, or better enhancement.

[fancyapps]

Hi,

Sorry, but I do not understand your comment about captions. In my opinion, it is very simple to use it, example:

Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, carousel, slide) {
    return (
      `${slide.index + 1} / ${carousel.slides.length} <br />` + slide.caption
    );
  },
});

https://fancyapps.com/playground/GQ

[hanscees]

Hi,

Sorry, but I do not understand your comment about captions. In my opinion, it is very simple to use it, example:

Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, carousel, slide) {
    return (
      `${slide.index + 1} / ${carousel.slides.length} <br />` + slide.caption
    );
  },
});

https://fancyapps.com/playground/GQ

The problem I have is that I want a complex html structure as caption. In this version I cannot add this easily to a slide because the only option to fill slide.caption via html is by doing caption="Xxx".

I have for instance in the caption four languages all in different div structures. A page button determines what language you see, and what languages are hidden. And also I have a url in the caption. In version three you could load any html into slide.caption by wrapping it inside a html structure like <figurecaption> lots of html </figurecaption>

[fancyapps]

Well, it could be as simple as this -

Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, carousel, slide) {
    const figurecaption = slide.$trigger.querySelector("figurecaption");

    return figurecaption ? figurecaption.innerHTML : slide.caption;
  },
});

https://fancyapps.com/playground/3n9

[hanscees]

that is fantastic, works like a dream: https://www.bomengids.nl/2022/2022bugtest/fs4.html

thanx a million!

[gyurmey2]

Well, it could be as simple as this -

Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, carousel, slide) {
    const figurecaption = slide.$trigger.querySelector("figurecaption");

    return figurecaption ? figurecaption.innerHTML : slide.caption;
  },
});

https://fancyapps.com/playground/3n9

Hi, does this also work in v5?

[fancyapps]

@gyurmey2 Yes, but it will be like this:

Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, slide) {
    const figurecaption = slide.triggerEl?.querySelector(
      "figurecaption"
    );

    return figurecaption ? figurecaption.innerHTML : slide.caption || "";
  },
});

https://jsfiddle.net/tzfjmy0k/

[fancyapps]

I've also created a new section in the documentation - https://fancyapps.com/fancybox/captions/

[gyurmey2]

@fancyapps, thanks a lot!

Unfortunately, WordPress generates the code below. Is there any way to do this?

<figure>
  <a href="full-size-image.jpg">
    <img src="thumb-image.jpg">
  </a>
  <figcaption>Example caption</figcaption>
</figure>

[fancyapps]

Simply replace selector here -

slide.triggerEl?.querySelector("figurecaption")

with the one that works for you, like slide.triggerEl?.parentElement.querySelector("figurecaption").

Basically, slide.triggerEl will be your link and then you use that to find your source for the caption.

[gyurmey2]

Unfortunately it doesn't work. Could the reason be that figcaption is not nested in a?

Fancybox.bind('figure a', {

   caption: function (fancybox, slide) {
   const figurecaption = slide.triggerEl?.querySelector('figcaption');
   return figurecaption ? figurecaption.innerHTML : slide.caption || '';

   },
}

[fancyapps]

I somehow hoped that you will figure it out that you simply need to add parentElement.

On Sun, 5 Mar 2023 at 18:50, Marius @.***> wrote:

Unfortunately it doesn't work. Could the reason be that figcaption is not nested in a?

Fancybox.bind('figure a', {

caption: function (fancybox, slide) { const figurecaption = slide.triggerEl?.querySelector('figcaption'); return figurecaption ? figurecaption.innerHTML : slide.caption || '';

}, }

— Reply to this email directly, view it on GitHub https://github.com/fancyapps/ui/issues/328#issuecomment-1455143606, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAIBWZOJPHX3XCCTJSVGULDW2S737ANCNFSM55MOSJPA . You are receiving this because you were mentioned.Message ID: @.***>

[gyurmey2]

I can't handle it, but thank you for your help.

[fancyapps]

Here is a working example with your HTML structure:

Fancybox.bind('figure a', {
  groupAll: true,
  caption: function (_fancybox, slide) {
    const figcaption = slide.triggerEl?.parentElement.querySelector(
      "figcaption"
    );

    return figcaption ? figcaption.innerHTML : slide.caption || "";
  },
});

https://jsfiddle.net/vgeb1Lwj/

[gyurmey2]

You are very helpful. Thank you very much!

[gyurmey2]

@fancyapps, sorry to bother you, but is it possible to get the attribute caption from an image? I try with below code snippet but it doesn't work.

caption: function (fancybox, slide) {
   const atrr = slide.triggerEl?.querySelector('img').getAttribute('title');
   return atrr ? atrr.innerHTML : slide.caption || '';
}, 

[fancyapps]

Title attribute is a string, not HTML element :)

caption: function (_fancybox, slide) {
  const title = slide.triggerEl?.querySelector('img').getAttribute('title');
  return title || slide.caption || '';
},

https://jsfiddle.net/qu6f8roy/

[gyurmey2]

@fancyapps, thank you again!