Issue with multiple shortcodes in the same page

[pamubay]

Because you are using same name for all the fslightbox instances.

data-fslightbox="gallery"

fslightbox instances documentation

Documentation—How to use | Vanilla JS Fullscreen Lightbox

You need generate unique id for each fslightbox instances, you can read a tips shared here:

Generate a random string

I recently fixed an issue where I needed to generate a random string. The string had to be random, even if given the same input seed. In short, there is a shortcode that creates “expandables” with a little js. Each expandable generates its html id based off the md5 hash of the shortcode’s .Inner content. Well, if two expandables had the same inner content, then things would break. My solution was: Get the md5 hash of the seed string Split that into an array Shuffle the array Convert the array…

you can try this: (not tested)

{{ with $.Get "title" }}<h3>{{ . }}</h3>{{ end }}
{{ with $.Get "content"}}<h4>{{ . | markdownify }}</h4>{{ end }}
+ {{ $seed := .Get "src" }} <!-- you can change this -->
+ {{ $unique := delimit (shuffle (split (md5 $seed) "" )) "" }}
<div class="gallery">
  {{ range $image := (.Page.Resources.ByType "image").Match (printf "%s*" (.Get "src")) }}
  {{ $src := $image }}
  {{ $thumb := .Resize "500x" }}
+    <a data-fslightbox="{{ $unique | safeHTMLAttr }}" href="{{ $src.RelPermalink }}">
      <img
      class="lazyload blur-up"
      data-src="{{ $thumb.RelPermalink }}"
      alt="{{ .Name | markdownify }}"
      >
  </a>
  {{ end }}
</div>