FancyBox3 - Lightbox

The CMS Questions
1

Hi folks, can you tell me how I get the FancyBox3 installed?

2

Short answer: in the same way as you would in a static site, have a look at their documentation. You can also find some topics here regarding FancyBox: https://forum.getkirby.com/search?q=Fancybox

3

Hello, I have found this excerpt, which might help me:

  • Download fancybox files to your /assets folder
  • Open /site/snippets/head.php if you have one. If not, open /site/templates/your_template.php and place:
<link rel="stylesheet" href="/path/to/fancybox/style.css" />
<script src="/path/to/fancybox.script.js"></script>

But: Which style.css is meant?
Look at the folder I copied in assets, I find under src / css / only

  • core.css
  • fullscreen.css
  • slideshow.css
  • thumbs.css

And there are also js-files enough, so I do not know which is to be linked.

4

It mean, the fancybox styles and scripts you downloaded from the fancybox site. You have to put them somewhere into the assets folder first.

Here’s the howto Fancybox site: http://fancybox.net/howto

Note that you have to include jQuery before you load the Fancybox JS files.

5

I did that. It’s in the /assets/-folder. And what’s the “/path/to/fancybox/style.css” and the “/path/to/fancybox.script.js” now?

How?

6

This is all described in the Fancybox documentation. Put the files described in the documentation into the respective /assets/css and /assets/js folders of your theme (create new folders if necessary) and then include them in the template/snippet of your theme that contains the head element (probably the header snippet). You can use the Kirby css() and js() helpers instead of the HTML standard tags.

Example code for including the FancyBox stylesheet (provided that file lives in /assets/css:

<?= css('assets/css/jquery.fancybox-1.3.4.css') ?>

Please understand that this is a Kirby support forum and we can’t really do basic HTML/CSS/JS support in detail.

1 Like
7

The reason of my astonishment is that there is no

jquery.fancybox-1.3.4.css

in the fancybox folder I downloaded and stored as a whole in

/assets/fancybox

There is only a

jquery.fancybox.css

in the directory

assets/fancybox/dist/

The note that jQuery 3+ is required, I’ve read. But since there is probably no guidance on how to do this in Kirby, I will reject my attempts and have to forego a lightbox.

Thanks anyway.

8

The file without the version number is just as well if it is missing, so instead of jquery.fancybox-1.3.4.css use jquery.fancybox.css.