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

Gallery blocking links // crashing site #58

Closed cdbrkfxrpt closed 3 years ago

cdbrkfxrpt commented 3 years ago

Hi,

I'm using the beautifulhugo theme for our blog, and I'm having the following issue with it. I'll use one blog article as an example, but it's the same for all articles using the gallery. The article in question is here.

The problem is that - and you should be able to verify it by going there and trying - after the gallery has been opened and closed again, all links on the site are blocked. It is then necessary to reload the page to get it working again. This is on Firefox 81.0 and Chromium 83.0.4103.116 (Developer Build), running on Debian sid (but I see this problem on any OS).

On mobile (Firefox on Android, both latest versions) the entire site crashes after closing the gallery and isn't scrollable any longer. Again, reloading the page fixes this.

It would be great if you could have a quick look. Sorry if I'm overlooking something obvious. As for the code, it should be exactly in line with your documentation:

---
title: product development
subtitle: at the hardware-software intersection
date: 2020-05-13
author: Florian
tags: ["baremetal", "bmc::labs", "engineering", "portfolio"]
---

Although most of our team has worked together for several years, **bmc::labs**
is still a young company, so our portfolio is not as rich as we'd like it to
be. In this article we'd like to give a brief look into our process and how we
work - and with a bit of luck, we'll convince you to help us add new items to
our successful projects list.

<!--more-->

{{< load-photoswipe >}}

### modular logging platform

In one of our customer projects, the idea of a modular logging platform came
up. The need was basically for a data logger, but as a cost efficient solution
with a limited feature set and configurable hardware.

We did an initial prototype based on [the blue pill
board](https://stm32-base.org/boards/STM32F103C8T6-Blue-Pill.html). In addition
to what the blue pill has, it was to feature

- Controller Area Network (CAN) Bus to be connected via predefined connector
- a temperature-pressure sensor for ambient conditions sensing
- GPS and a mobile data module (Bluetooth optional)
- a small OLED to output results and the like
- some LEDs for statuses

{{< gallery caption-effect="fade" >}}
  {{< figure thumb="-thumb" link="/img/product-development/onboard-1.JPG" caption="the prototype - fig 1" alt="prototype" >}}
  {{< figure thumb="-thumb" link="/img/product-development/onboard-2.JPG" caption="the prototype - fig 2" alt="prototype" >}}
  {{< figure thumb="-thumb" link="/img/product-development/onboard-3.JPG" caption="the prototype - fig 3" alt="prototype" >}}
{{< /gallery >}}

We did some basic software tests and 3D printed some housings before the
customer shifted the project focus more in the direction of a software
solution for post-processing. However, this project has become the basis for a
project of our own - but more on that in another article.

### control unit configuration selector

A customer approached us looking for a configuration selector for control units
with the following requirements:

- replaces a rotary switch
- should be removable
- must be sealable (preferably using sealing wire)
- must come with a reliable and unique mounting solution

We did a preliminary design inspired by the [Fischer® Rugged Flash
Drives](https://www.fischerconnectors.com/us/en/products/rugged-flash-drive).
We quite liked the design, but recommended to the customer that a different
solution would bring less pain in several regards.

{{< gallery caption-effect="fade" >}}
  {{< figure thumb="-thumb" link="/img/product-development/stick-1.JPG" caption="stick selector - fig 1" alt="stick selector" >}}
  {{< figure thumb="-thumb" link="/img/product-development/stick-2.JPG" caption="stick selector - fig 2" alt="stick selector" >}}
  {{< figure thumb="-thumb" link="/img/product-development/stick-3.JPG" caption="stick selector - fig 3" alt="stick selector" >}}
{{< /gallery >}}

The solution suggested to the customer was to use a rotary with a robust and
unique housing and rotator - as recognizable as it gets - and design that to be
wire sealable. The idea was accepted and once again, we went to the drawing
board to make it happen.

{{< gallery caption-effect="fade" >}}
  {{< figure thumb="-thumb" link="/img/product-development/rotary-1.JPG" caption="rotary selector - fig 1" alt="rotary selector" >}}
  {{< figure thumb="-thumb" link="/img/product-development/rotary-2.JPG" caption="rotary selector - fig 2" alt="rotary selector" >}}
  {{< figure thumb="-thumb" link="/img/product-development/rotary-3.JPG" caption="rotary selector - fig 3" alt="rotary selector" >}}
{{< /gallery >}}

As this solution was accepted all the way through prototyping and testing, we
finalized the product with a anodized finish and adequate packaging. We
actually ended up quite liking this product, despite the fact that it involved
only very minor electronics design, and no software at all.

### last words

The projects presented above are just two recent examples. Our team has
realized projects using custom electronics, as well as Raspberry Pis and other
non-custom hardware.

We want to highlight here:

- We do custom electronics, with the software aspect in mind.
- We work together with our customers to find the best solution, even if that
  involves shelving weeks of development effort in favor of a better solution.
- We have the in-house know-how for mechanical design to support our
  electronics design with housings and custom solutions.
- If you want us to, we'll take care of everything, including the packaging.
- Our strong partners in electronics manufacturing, mechanical manufacturing
  and packaging design and manufacturing enable us to do so.

And honestly, we enjoy these projects like nothing else...

Reliable results, efficiently delivered.

we.are.#baremetal

That is of course just the markdown I give to Hugo, but since I haven't otherwise changed your templates, that shouldn't be the issue. On the development server it seems the problem has disappeared; I can't reproduce it there any longer.

Best regards

EmielH commented 3 years ago

Hi @cdbrkfxrpt

It looks like load-photoswipe is called twice. load-photoswipe.js on your site seems to be an older version that doesn't yet have protection against being loaded twice (see here). Do you perhaps have load-photoswipe in your theme somewhere too?

See issue #6 for more info too.

Hope this helps!

cdbrkfxrpt commented 3 years ago

Thanks a dozen @EmielH - there was another include in the theme, I'm not sure if it is like this in the theme or I put it like this; likely the latter. Removing it seems to solve the issue.

Cheers!