lightbox function not working with {{< load-photoswipe >}}

[vjfader]

I enabled PhotoSwipe using {{< load-photoswipe >}} inside blog blog, however it is linking directly to the image itself instead of opening inside a lightbox.

my example: https://new-homepage-2018.netlify.com/blog/testblog1/

Please advise, thanks!

[vjfader]

@fte378 , the image file name is named 1359007-bigthumbnail.jpg, I'm using this code for the gallery:
{{< gallery dir="/img/" />}} {{< load-photoswipe >}}

[fte378]

After looking at your page I think that your jQuery link is wrong.

[vjfader]

updated the jQuery script inside load-photoswipe.html with below code:

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

tested on localhost still not showing lightbox.

[fte378]

Hm. Can you provide your complete source code for the gallery part?

[vjfader]

I'm using the default load-photoswipe.html code, installed rest as instructed in readme.md

[vjfader]

site code on Git: https://github.com/vjfader/home2018

[fte378]

Ok - first change to get it running: copy the '+++' in about.md also below the metadata. Else Hugo wouldn't even start.

[fte378]

You did miss the following sentence in the readme: [image].jpg is used for the hi-res image, and [image]-thumb.jpg is used for the thumbnails.

You also mix images used for the gallery with other images in the same directory.

There are two possible strategies as solution:

1. Create a subdirectory in /img for your gallery and put your images there. Use the naming convention mentioned above.

2. Use the gallery tag without the directory and load your images through figure tags like so:
   {{< gallery >}} {{< figure src="thumb.jpg" link="image.jpg" >}} ... {{< /gallery >}}

[fte378]

You missed another part of the readme:

Add the following lines to the footer of your template, just before the end body tag: (under Theme integration)
I added the mentioned code at the end of _layout/partials/footer.html and all worked.

Here is your testblog1.md file. Both gallery versions are included for reference.
The one with single figure tags is commented out, the other (with directory) is active.

some text!

{{< figure src="/img/1359007-bigthumbnail.jpg" title="Steve Francia" >}}

{{< gallery dir="/img/gallery1" />}}

<!--
{{< gallery >}}
   {{< figure src="/img/gallery1/backwoods-thumb.jpg" link="/img/gallery1/backwoods.jpg" >}}
   {{< figure src="/img/gallery1/vjfader-thumb.jpg" link="/img/gallery1/vjfader.jpg" >}}
{{< /gallery >}}
-->

{{< load-photoswipe >}}

[fte378]

Btw: You know that the purpose of thumbnails is to save initial bandwith? So normally thumbnails are much smaller than the 'big' image.

[vjfader]

@fte378 , thanks for your help, I will test this out when I get a chance.

I was too lazy to create thumbnail images, just testing out the gallery first.

any thoughts on this topic? #36