# Trying to generate "dynamic" inline javascript in a template

**URL:** https://discourse.gohugo.io/t/trying-to-generate-dynamic-inline-javascript-in-a-template/23181
**Category:** Uncategorized
**Created:** [January 31, 2020, 11:00pm UTC](https://discourse.gohugo.io/t/trying-to-generate-dynamic-inline-javascript-in-a-template/23181 "2020-01-31T23:00:32Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![geraud](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/geraud/32/1686_2.png) [@geraud](https://discourse.gohugo.io/u/geraud)
#### Post date: [January 31, 2020, 11:00pm UTC](https://discourse.gohugo.io/t/trying-to-generate-dynamic-inline-javascript-in-a-template/23181/1 "2020-01-31T23:00:32Z")

</div>

Hi,

I’m trying to use a jquery plugin called “Jquery Zoom” ([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 ?