search

liwenyip / hugo-easy-gallery

Automagical css image gallery in Hugo using shortcodes, with optional lightbox/carousel gadget using PhotoSwipe and jQuery.
MIT License
573 stars 111 forks source link

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

Open vjfader opened 5 years ago

vjfader commented 5 years ago

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 commented 5 years ago

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

fte378 commented 5 years ago

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

vjfader commented 5 years ago

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 commented 5 years ago

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

vjfader commented 5 years ago

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

vjfader commented 5 years ago

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

fte378 commented 5 years ago

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

fte378 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

vjfader commented 5 years ago

@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? https://github.com/liwenyip/hugo-easy-gallery/issues/36