How to get the photoswipe.hbs to work / manipulating the gallery

Hi

I am trying to get the gallery to “work”. I see in the templates that are for free that they have added a photoswipe.hbs in the ‘partials’ folder. Adding that file with this content does not give any result. (‘gallerys galleryIndex ‘ is ‘galleryes[galleryIndex].’)

<script>

var photogalleryInit = function(gallerySelector) {

  var gallerys = document.querySelectorAll(gallerySelector);
  for (galleryIndex in gallerys) {
    gallerys galleryIndex setAttribute("data-str", "'This is a test'"); 
  }

} 

photogalleryInit(".gallery"); 

</script>

It does work when adding this code in a .js file that is added to the header. But I prefer to do this change on the server-side and not at the client, I guess that photoswipe.hbs will make the changes when generating the website.

I have only added this file, in a template that I am building from the ground up.

Is there an easy fix or should I go for doing this client side?

In front thanks 🙂

Edit: I want to use my own fullscreen viewer, which I already have added to the other images like the feature image, that is why I am manipulating the code.