viewer.js for gallery pages

[bwaklog]

We plan to use viewer.js for making the galleries more interactive for users. While the library is being called there are a lot of cases where this implementation fails

How this works is, static/scripts/viewer.js applies the script on all images inside a div with id #images which should look something like this

const gallery = new Viewer(document.getElementById("images"), {transition: false});

<div id="images">
    <img loading="lazy" src="url" alt="alt">
    <img loading="lazy" src="url" alt="alt">
</div>

The gallery page is organised in a different manner, where each event is placed under its own details tag to make them a drop down, so these images div are nested deep inside the page. There is also another issue with how and when this script is called. The gallery page is not hard coded but is filled in by a script called gallery.js which can be found in the static/scripts directory. This reads the urls from a json file at static/images/gallery/gallery.json and populates a section block with id gallery. So ensure that viewer.js which is being called in the head_gallery.html layout file is called after all the images are populated in the page