How do I make a non-looping gif play in every passage it appears in?

Question

Hello!

I am using SugarCube 2.18.0 on the online maker.

I have a few non-looping gifs that appear in multiple passages, but if the gif has appeared in a previous passage it does not play again.

I have tried putting something like this in the javascript editor:

<img id=graph alt="" 
  src="https://archive.org/download/button-gifs/spacekey.gif" 
  />

<script language="javascript" type="text/javascript">
    var d = new Date(); 
    document.getElementById("graph").src = 
      "https://archive.org/download/button-gifs/spacekey.gif?ver=" + 
       d.getTime();
</script>

But when I play the story it gives the error: Unexpected token <.

 

Thank you in advance!

Answer 1

In the html, your ID, "graph", should be in quotes. 

<img id='graph'... 

This is probably not the issue, but it isn't helping. 

I can't test it because I'm not at my computer, but you could try this: 

postdisplay['gif-reloader'] = function (t) {
    $('img#graph').attr('src', 'https://archive.org/download/button-gifs/spacekey.gif');
};

This code will tie the execution of the JavaScript to the passage rendering process; immediately after the passage is loaded and displayed, the function will fire and (hopefully) replay the gif. 

Again, I didn't test this code, so I apologize if it doesn't work, but I think attaching it to a task object is the piece of the puzzle you're missing. 

Also, you should use the <<script>> macro rather than the <script> tag in most (if not all) cases when working in SugarCube. 

Comments

Thank you Chapel for your answer!

It did not email me when you answered, so I am glad I checked today. The notification was not in spam either. Perhaps because I had not verified my email yet.

I found another snippet of code to try a bit ago:

$(document).ready(function(){
jQuery('img').each(function(){
jQuery(this).attr('src',jQuery(this).attr('src')+ '?' + (new Date()).getTime());
});
});

And it worked for half the problem: the gif would reload if it appeared in a new passage, but it would not reload if you entered a passage that had loaded before (this story has some crossing back and forth).

Your code works just as good as the above, though I would have to add it again for each gif (and there are quite a few actually). But if "gif-reloader" could be triggered for all gifs when the reader goes to a passage rather than when the passage loads I think that would solve all issues.

Thank you again Chapel!

---

I think we can combine our solutions here, actually.  Try one of these scripts.  

If you don't have multiple gif's in the same passage, but do have multiple gif's across the story, try this:

postdisplay['gif-reloader'] = function (t) {
    var source = $('img#graph').attr('src');
    $('img#graph').attr('src', source + '?' + Date.now());
};

Assuming every gif has the ID 'graph', this code will pull the src attribute and reassign it when the passage is rendered, every time.

If you need to have multiple gif's in the same passage, things get a bit more messy, but not by too much.  Try this:

postdisplay['gif-reloader'] = function (t) {
    var el = $('img.gif-reload').toArray();
    var i, source;

    for (i = 0; i < el.length; i++) {
        var source = $(el[i]).attr('src');
        $(el[i]).attr('src', source + '?' + Date.now());
    }
};

For this one, you'll need to give each gif you want to replay the class 'gif-reload'.

---

Hello again!

Sorry I did not get back to you to say whether the fix worked or not: I have been busy with a short film these last couple days.

Last night I looked up how to add a class, and came up with this, if this is right:

$('a[href*=".gif"]').addClass('img.gif-reload');

I tried out each of the two snippets, and gifs still only reload if a new passage is displayed, and do not reload if you go to a passage that has already been visited.

What I had been trying at first,

Incidentally, it is alright if every gif always reloads. They are all small, and there are none that have to not reload, none that I would need to avoid making reload.

---

First of all, add a class using html, like this: 

<img id="graph" class="gif-reload"... 

There's no need to reinvent the wheel using jQuery that I can see. 

Second, if you fix that and it still doesn't work, I'm not sure what to tell you, as I did test it (using the same gif as provided in your example) and it reloaded for me when revisiting passages. 

Hopefully the issue is that you're not really adding the class correctly, but we'll see. 

---

Sorry about that, everything I get is generally looked up on google.

It works perfectly now if I put this in:
 

<img id="graph" class="gif-reload" src="https://archive.org/download/button-gifs/spacekey.gif">

I am using the gifs as links, like so:
 

[img[https://archive.org/download/button-gifs/spacekey.gif][break-window]]

Is there a way to add a class to this?

---

I was using your initial example, which didn't use image markup, to go off. If you want to use image markup, then you can wrap it in custom style markup to a achieve a similar effect: 

@@.gif-reload;[img[https://archive.org/download/button-gifs/spacekey.gif][break-window]]@@

Then, you'd update the JavaScript to reflect that change. Instead of "img.gif-reload" (an image element with the 'gif-reload' class), we're looking for an image element inside an element with the 'gif-reload' class, which would be ".gif-reload img". 

postdisplay['gif-reloader'] = function (t) {
    var el = $('.gif-reload img').toArray();
    var i, source;

    for (i = 0; i < el.length; i++) {
        var source = $(el[i]).attr('src');
        $(el[i]).attr('src', source + '?' + Date.now());
    }
};

It's important we grab the <img> element itself since we need the src attribute. 

---

So happy!

It is hard to remember to check this without any email notifications. Thank you! Your answer fixes all problems as far as I can tell.

Here is a game I made with images on Harlowe, which convinced me I needed to learn how to use Sugarcube:

philome.la/PatrickLauser/for-nathaniel

Here is a 8 minute or so film we were finishing these last few days, if you are interested in that sort of thing:

youtu.be/KE8-mMqGWTo