CODEWITHSUNDEEP
javascriptfancyboxfancybox-3
Bear Meshkowich
Bear Meshkowich

Reputation: 1

Image filename inside fancybox 3

Can't find this in the documentation, although seems to be quite trivial. How do you display filename of the image in the fancybox?

Upvotes: 0

Views: 580

Answers (2)

Paul
Paul

Reputation: 33

In fancybox 3 you can add a data-caption attribute to the element with the name of the image. For example:<a href="myHref" data-caption="myImageName" data-fancybox="myGroup"><img src="mySource" /></a>.

Don't forget to initialize it after the element has loaded with the following, feel free to add or remove options.

$("[data-fancybox]").fancybox({ fullScreen: true, thumbs: false, loop: true, touch: true, infoBar: true, buttons: [ 'slideShow', 'fullScreen', //'thumbs', //'share', 'download', //'zoom', 'close' ] });

Fancybox with caption

Upvotes: 0

Janis
Janis

Reputation: 8769

Of course, documentation does not cover how to "display filename of the image", because it is not possible to include every possible scenario. And callbacks are specifically designed for such needs - they allow you to execute your piece of the code at the certain stages (for example, before loading or right before displaying the image).

You did not specify where you want to display the filename. If you want to put inside caption, then documentation provides several examples of how to customize caption - http://fancyapps.com/fancybox/3/docs/#faq-2

Upvotes: 1

Related Questions