Overlay captions in Starterkit album lightbox?

Kirby 3
1

I am testing the 3.5 Starterkit for a potential project and would like to have image captions display as an overlay when an album image is clicked on (and displays via lightbox). Is there a way to get that to work?

Thanks in advance.
Kurt

2

Well, yes, you can change the script to bring up a figure tag with caption instead.

But the Starterkit is not really a theme made to be used in client projects as is. The purpose of the Starterkit is to show you how Kirby works, clad in a minimal attractive design.

3

Thanks for this reply. Can anyone tell me more about “changing the script to bring up a figure tag with caption instead” (so that captions are displayed when an image opens in lightbox)? Where exactly would this script need to be changed and how might the change look?

4

Hi @texnixe Thanks a lot for replying. I do have a similar issue and wonder what the line…

$lightbox = $link->isEmpty();

… at site/snippets/blocks/image.php does. Would be great to learn more about snippet blocks and if that line could be used to pass Lightbox configuration parameters along?

Thanks in advance,
Moritz

5

This code checks if the link field of the image block is empty, and if that’s the case, a data-lightbox attribute is added to the anker tag. Otherwise, if there is a link, then the image will just link to that location and not open the image in a modal.

What do you mean? What sort of lightbox parameters?

In the Starterkit, the JS that creates the overlay can be found in /assets/js/index.js:

// Lightbox
Array.from(document.querySelectorAll("[data-lightbox]")).forEach(element => {
  element.onclick = (e) => {
    e.preventDefault();
    basicLightbox.create(`<img src="${element.href}">`).show();
  };
});

It depends on the lightbox.js script in the same folder.

6

Wow, @texnixe , your so fast and competent. Thanks for helping me out!

What do you mean? What sort of lightbox parameters?

Basically I’d like to tell Lightbox to add an option to swipe/click through all images on that same album page. Is that possible?

7

Maybe use the script from the getkirby.com repo instead, it has a built-in prev-next option that you can use by passing a group name to the thumbs, e.g. data-lightbox="gallery".

You can find the unminified original code of the lightbox scripts in the getkirby.com repo if you want to build on it:

Edit: I thought both scripts were identical, but they are not.

This seems to be the script used in the Starterkit (doesn’t look as if there was a lot to modify).

If you need more control or features, maybe a different lightbox library would be a better option.

8

Bummer – not so much. :upside_down_face: I didn’t get your reply @texnixe and therefore started integrating SwipeBox. I found it through a legacy Kirby plug-in and liked it’s features. Unfortunately it does not seam as easy as it seemed to activate its Previous/Next arrows but when I’m done I probably try to move it to a plug-in compatible with Kirby 3.x. I keep you posted! Thanks for all your help – and who knows, maybe I will get back to your solution later. Yours, Moritz

9

I wanted to replace the lightbox.js from the starterkit with the one you mentioned from getkirby.com for the gallery feature but it seems to depend on some other scripts / variables that I don’t know:

Uncaught SyntaxError: Unexpected token ‘export’
custom.56a743f97c41f9d4119125e99d4c6b7c.js:5
Uncaught ReferenceError: basicLightbox is not defined
at HTMLAnchorElement.element.onclick (custom.56a743f97c41f9d4119125e99d4c6b7c.js:5)

Any easy way to fix this?

10

Have a look at the /snippets/layouts/head.php snippet where the Lightbox is imported and instantiated.

11

I added the same import definition but then something seems to be missing.
I guess a similar code like this one:

Array.from(document.querySelectorAll("[data-lightbox]")).forEach(element => {
    element.onclick = (e) => {
      e.preventDefault();
      basicLightbox.create(`<img src="${element.href}">`).show();
    };
  });

Can you help me find that?

12

I still wasn’t able to find the missing code snippet.
Can you help me with it @texnixe?

13
1 Like
14

That brings other issues with it:

image
image830×82 11.9 KB

image
image820×146 25.1 KB

I have added and imported the polyfill dialog.js as well.

Do you maybe know what is meant by the author of the basicLightbox with this comment about this feature? Gallery Support ¡ Issue #24 ¡ electerious/basicLightbox ¡ GitHub