I’m doing my first project in Kirby 3, was curious of what would be the best approach to adding lightbox functionality for images?
Doesn’t really have anything to do with Kirby. You don’t need a plugin to implement any of these libraries.
Ah alright, thank you!
So would they go into the assets folder of kirby’s site structure?
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
If im using jQuery in a project, i usually use Venobox. If you prefer not to, then Halka box is a good one.
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.
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>
Got it working! Thank you