Lightbox Functionality in Kirby 3?

Kirby 3 Solved ✅
1

I’m doing my first project in Kirby 3, was curious of what would be the best approach to adding lightbox functionality for images?

2

https://photoswipe.com?

Doesn’t really have anything to do with Kirby. You don’t need a plugin to implement any of these libraries.

3

Ah alright, thank you!

4

So would they go into the assets folder of kirby’s site structure?

5

Yes. And you can add it to a template with the js and css helpers. The better way is to bundle things together though, with a build process, but theres plenty of ways to do that, which are not down to Kirby. Google is the thing to ask :slight_smile:

If im using jQuery in a project, i usually use Venobox. If you prefer not to, then Halka box is a good one.

1 Like
6

I’m trying to use Halka box.
I’ve placed the appropriate files into the assets/css and assets/js and then used the css and Js helpers to load them. I placed the demo that comes with it and changed the image links to images within my site, but when I click on them, it just takes me to the image separately.

7

Sounds like you havent actually called the plugin, since what you are getting is default browser behaviour. As the docs say, you need to call it dependending whether you want a gallery or single images to pop up in the light box…

Assuming all your images have a class of “gallery1”:

halkaBox.run("gallery1");

You need to do that in a script tag, probably at the bottom of the page…the demo page has this at bottom…

    <script>
        window.onload = function () {
            halkaBox.run("gallery1");
            halkaBox.run("gallery2", {
                animation: "fade",
                theme: "dark",
                hideButtons: false,
                preload: 0
            });
            halkaBox.run("hb-single");
            halkaBox.run("singleImage1", {
                theme: "dark"
            });
            halkaBox.run("singleImage2", {
                theme: "dark"
            });
        };
    </script>
8

Got it working! Thank you :slight_smile: