Ask a Question

Having trouble incorporating a Jquery script within the story's own Javascript

+1 vote
by (2.1k points)

Summary: 

I'm using a script called Elevatezoom to zoom in on a map image I have. I am unable to make it work by copying the script and pasting it into Twine's Javascript section for the story. The only way I've gotten it to work is by having the file in the same directory and manually editing the HTML file to have a script at the end of the <head> element. I would rather not have to do this every time.

Description:

The script should make it so that when I mouse over the image, it creates a smaller box around the cursor that acts as a lens and zooms into the image by displaying a larger image that is also included.

Here's a folder with two examples!

In the first example, the script is pasted into the story and is the way I wish I could get it to work. When I mouse over the image, however, the browser spits out a script error

Here's a screenshot of the issue!

In the second example, the story works fine, but it does not include the script in the Javascript section. Instead, it is manually edited in at the end of the <head> element. This works but is un-optimal for me and I would like to find a way to be able to have it work in a manner similar to the first example.

If you don't want to check yourself, here's a screenshot with the manual edit highlighted in notepad++!

 

If possible, I would not like to have to manually include the script every time I make a change and need to republish for testing. Is there some sort of way to include the script with the file as it's being published, or fix it so that it works when pasted into the story's Javascript section?

1 Answer

+1 vote
by (68.6k points)
edited by
 
Best answer

The script in question is poorly written and has, at least, a few issues.  Most relevant to you, AFAICT, is the fact that it blithely generates auto-globals, likely without ever intending to so so.  All scripting in SugarCube is normally run in what's known as strict mode, which disallows the implicit creation of auto-globals—attempting to do so causes an error to be thrown.  There may well be additional serious issues as well, that was simply the first one I encountered.

Without fixing the script—it was last updated in 2013—there's zero chance of it working within the Story JavaScript.

To get it working as-is, you'd need to evaluate the script globally—i.e. outside of strict mode.  Adding it to a <script> element within the <head> is one way to accomplish that.  Another way would be to add it to a normal passage, rather than Story JavaScript, and eval its contents globally.

For example, place the script code within a passage named elevateZoomScript and then place something like the following within your Story JavaScript:

jQuery.globalEval(Story.get('elevateZoomScript').text);

 

by (2.1k points)
Do you have any recommendations for another script that's more recent I could use instead? Or even another method to do this that works better? If there's something more efficient, or a simpler way to accomplish something similar I'm all up for checking it out!
by (68.6k points)
I'm afraid not, no.  I'm positive that there are other scripts which provide the same feature, however, I don't know the names of any off-hand.
by (2.1k points)
Alright, I'll try and see if I can find something that's not so outdated. Thanks a lot for your help!
by (2.1k points)

I've actually found a more updated version of the same plugin. Someone took it into their own hands to fix some issues with it and it's been updated as recently as April of this year. I'll link it here since it works just by pasting it into the Javascript. If anyone else has issues with zooming or needs a plugin, it's elevatezoom-plus.

 

Here's a link to the github repo!

And here's a link to some example images!

Snow Theme by Q2A Market
Powered by Question2Answer
...