[lightbox-gallery] Lightbox not working/opening

[samokish-ivan]

I tried almost everything to get this to work, but for some reason, even though my gallery displays here on this page: https://samokish.ca/photography the lightbox does not activate. I am using the Grav Coder theme.

I checked and the js script is not being used. I'm totally new to Grav and Twig templates. I have no clue what I'm missing here. Any insight on this would be appreciated.

I used the same code as provided in the documentation, with a modification posted here where images are all pulled in from the media automatically. Here is the complete code for the page reference above:

{% extends 'partials/base.html.twig' %}

{% do lightbox_gallery.addAssets() %}

{% block body %}

<section class="container post">
    <article>
        <header class="page-header">
            <div class="page-title">
                <h1 class="title">{{ page.title }}</h1>
            </div>
        </header>

{% set styling %}
.lightbox-gallery {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.lightbox-gallery .lightbox-gallery__columns {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.lightbox-gallery .lightbox-gallery__column {
  width: 50%;
  padding: 0 10px;
  margin-bottom: 20px;
}

.lightbox-gallery img {
  display: block;
  border-radius: 5px;
  transition: all .2s ease-in-out;
}

.lightbox-gallery img:hover {
  filter: brightness(60%);
  transform: scale(1.05);
}

@media only screen and (min-width: 600px) {
  .lightbox-gallery .lightbox-gallery__column {
    width: calc(100% / 3);
  }
}

@media only screen and (min-width: 1000px) {
  .lightbox-gallery .lightbox-gallery__column {
    width: 25%;
  }
}

.lightbox-gallery .hidden {
  display: none;
}
{% endset %}

{% do assets.addInlineCss(styling) %}

{% set data = page.header.gallery %}
{% set thumb_width = data.thumb.width|default(600) %}
{% set thumb_height = data.thumb.height|default(450) %}

<div class="lightbox-gallery">
    <div class="lightbox-gallery__columns">
        {% set gallery = md5(page.url) %}
        {% for img in page.media.images %}
        <div class="lightbox-gallery__column">
            {% set content = img.cropZoom(thumb_width,thumb_height).html(title, title) %}
            {% set image =  img.url %}
            {% include "partials/lightbox.html.twig" %}
        </div>
        {% endfor %}
    </div>
</div>

{% endblock %}

[rhukster]

I think i see the problem.. Typically a theme has a 2 places you can add js, the top/head which is default, and the bottom. The lightbox gallery addAssets() method is specifically specifying bottom for the location, and the Coder theme doesn't have this available.

Simplest solution is to add an extra line in the grav-coder/templates/partials/base.html.twig file, after this:

{{ assets.js() | raw }}

so you have:

{{ assets.js() | raw }}
{{ assets.js('bottom') | raw }}

Then it should work fine.

[samokish-ivan]

This worked! Thank you!