Image gallery lightbox opening in new page

Help
1

Hi I installed this image gallery from the codex.
it shows the thumbnails, but when I click on one it opens a new page rather than a lightbox.

I have installed jquery, lightbox.js and lightbox.css in the footer and head files.

I’m running it on github.io

the directory structure looks like this:

_site
│   ├── 404.html
│   ├── about
│   │   └── index.html
│   ├── assets
│   │   ├── css
│   │   │   └── lightbox.css
│   │   ├── fotos
│   │   │   └── readme.txt
│   │   ├── images
│   │   │   ├── close.png
│   │   │   ├── fishing.jpg
│   │   │   ├── grant_fishing_explosives.jpg
│   │   │   ├── loading.gif
│   │   │   ├── next.png
│   │   │   ├── prev.png
│   │   │   └── snow_trees.jpg
│   │   ├── js
│   │   │   └── lightbox.js
│   │   ├── main.css
│   │   ├── main.css.map

thanks for any help.

2

You probably forgot to link the css and js file in the footer. It is a missing piece of information on the codex website. I will add it.

1 Like
3

Thanks for the quick response. I’ve already included the lightbox and jQuery. I looked in the image-gallery.html file and thought – How is this loading the lightbox? I went back to the documentation and saw the very subtle

trigger the lightbox if present…

I added l lightbox 2.11.3 and jquery 3.6. The css is in the head and the js in the footer.

here is a screen shot of the chrome dev console:

Screenshot 2021-03-09 062131|690x365

and a clip from the file: _includes/head.html

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{%- seo -%}
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
<link rel="stylesheet" href="{{ "/assets/css/lightbox.css" | relative_url }}$

and a clip from the /_includes/footer.html

 <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U$
 <script src="{{ "/assets/js/lightbox.js" | relative_url }}"></script>

I’m learning jekyll but I am comfortable with js and html etc. I’m not sure about the curly braces and the | relative url in the jekyll markup. I simply copied and modded what was there. Maybe I should just go with the standard html src= like the jQuery?

You might also mention while revising the documentation if you haven’t set the url: # in the /_config.yml file you are going to get some errors as well. This is an out of the box github install – wip.

Thanks for the great gallery and the absolute ease of getting it up and running.

4

You should use this lightbox:

It should work without much effort. Let me know if you experience any problems.

5

Thank you for the gallery and the support. I was using The lightbox by Lokesh Dhakar.
All working as expected now.

6

thanks for the awesome information.

7

thanks issue has been fixed.