HUGO

Trying to generate "dynamic" inline javascript in a template

Hi,

I’m trying to use a jquery plugin called “Jquery Zoom” (https://www.jacklmoore.com/zoom/).
If I want to zoom in on an image on mouse hover, I have to initialize the plugin with this line of javascript:
$(’.smallImageSelector’).zoom(url: ‘path_of_the_big_image’);

In my single.html template I want to initialize this plugin for a list of images based on a param (an array of paths) defined in the front matter of the md file.

In the front matter, I have this param:
zoom_images = [“path1”, “path2”, “path3”,… ]

And in my template I have this inline javascript:

<script> {{ $.Scratch.Set "counter" 1 }} {{ range .Params.zoom_images }} $('img{{ $.Scratch.Get "counter" }}').zoom(url: '{{ . }}'); {{ $.Scratch.Add "counter" 1 }} {{ end }} </script>

Then the generated code is:

<script> $('.img1').zoom(url: '\/path\/to\/big-img1.jpg'); "" $('.img2').zoom(url: '\/path\/to\/big-img2.jpg'); "" </script>

Everything works fine except for the path : all the slashes are escaped '\/path\/to\/big-img1.jpg'

I have tried many things like using safeHTML, safeJS, htmlUnescape, even {{ replace . “\/” “/” | safeHTML }} found in a discussion. But nothing seems to work.

Any idea ?