Problem to integrate LightGallery.JS

1

Hi, I know that isn’t a proper issue about Kirby but I have a problem building a lightbox with a set of images charged through Kirby’s panel. I want to use the LightGallery.JS library.

So, this the template fragment that render the images:

<?php if ($page->details()->isNotEmpty()): ?>
    <div class="details-img-container" id="details_gallery">
        <?php foreach ($page->details()->toFiles() as $image): ?>
            <a href="<?= $image->url() ?>">
                <img src="<?= $image->url() ?>" class="detailwork-img">
            </a>
        <?php endforeach ?>
        </div>
<?php endif ?>

and I have controlled my network browser and the JS files are there, as I put in the header template:

<!-- Add the lightgallery JavaScript from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/lightgallery.min.js"></script>


<!-- Add the lightgallery CSS from CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lightgallery.min.css">    
  
<!-- JS -->

<?php if ($page->template() == 'home'): ?>
  <?= js( [ 'assets/js/home.js' ]) ?>    
<?php endif; ?>

<?php if ($page->template() == 'obra'): ?>
  <?= js( [ 
    // 'assets/js/lightgallery.min.js',
    'assets/js/obra.js'
   ]) ?>    
<?php endif; ?>

<?php if ($page->template() == 'expo'): ?>
  <?= js( [ 
    // 'assets/js/lightgallery.min.js',
    'assets/js/expo.js'
  ]) ?>    
<?php endif; ?>

As you see I have tried to included locally too, but the issue persists. For some reason it not works.

Thanks in advance with someone can help me!

2

You shouldn’t include the script twice, so either load the local JS and CSS, or load from CDN.

I’m not familiar with this library, but as far as I can see from a quick look at the documentation, you either need to initialize the gallery or use some other markup with data attributes.

I don’t see any of that in what you posted above.

So I’d suggest you read through the lightbox documentation thoroughly.

3

Correct @texnixe, it is missing the script initialization:

4

BTW: Kirby offers a simple way to include template specific stylesheets/scripts via @auto, so no need to clutter your code with a lot of if statements:

1 Like
5

Excuse me, I have included the js to initialize the script. And yes, I have read the documentation. Bellow, the js initialization:

lightGallery(document.getElementById('details_gallery'), {
  download: false,
  speed: 500,
});

and the console is clean… even though you put lightGallery in it, the response is ok,

Screenshot 2023-06-29 at 23.44.24

so, this behaviour suggests to me that Kirby manipulates the DOM in a way that I don’t know…

So, if you or somebody knows another good lightbox gallery, feel free to suggest me.

6

Oh, this is awesome!

7

Definitely not. Kirby doesn’t do anything in your frontend, you create your templates.

I did a quick test and this lightbox gallery works for me.

What exactly does not work?

8

I don’t know… I have made a lot of tests and nothing… The gallery doesn’t start, instead, the a tag opens the Kirby URL image:

https://recordit.co/bUwNaSk8OJ

9

Sharing a screen recording doesn’t really help much debugging your issue other than showing that yes, things are indeed not working as expected.

Can you upload your project somewhere so that I can take a look for you?

I can confirm what @texnixe said and with your markup and your initialisation script everything is working as intended. I have the starterkit open in front of me and the lightbox is working just fine so the issue has to be somewhere else in your setup.

1 Like
10

Yes, I send you an invitation to the repository. Thanks a lot!

11

Two ways to fix your issue.

  1. Move your JS in the footer
  2. Wrap your initialisation script inside a DOMContentLoaded event

The reason why it’s not working right now it’s because the script it’s executed before the rest of the content has had time to load.

12

Thanks, now I will control the DOM load in every JS script that I will use in a Kirby web.

13

Just to be clear, this has nothing to do with Kirby specifically. This is just how things work in general. And that is why common wisdom says styles at the top, scripts at the bottom.

1 Like