Triggering a GIF with your mouse on Sugarcube?

maysam_a

Hi,

I have been searching with no success if there is a way to make a gif play when you clicks an object. Similar to this but by clicking the image.

Thanks.

TheMadExile

The following is the simplest thing which should work:

<<click "Do the thing…">>
<<replace "#imgbox-1">>[img[URL_of_animated_image]]<</replace>>
<</click>>\
<div id="imgbox-1">[img[URL_of_static_image]]</div>

maysam_a

Thank you for your reply! It helped a lot! However, what should I change if I want the trigger to occur when you click the mouse left button down instead of clicking on the text?

Thanks again!

TheMadExile

Click where? Anywhere on the page? Someplace specific?

maysam_a

Anywhere on the page.

TheMadExile

That will require the use of some JavaScript.

Instead of the [img[…]] markup, we'll use HTML <img> markup this time around:

<img src="URL_of_static_image" data-asrc="URL_of_animated_image">

And put something like the following into your Story JavaScript to make it work:

predisplay['image-swap-cleanup'] = function () {
	$(document).off('click.image-swap');
};
postdisplay['image-swap-setup'] = function () {
	setTimeout(function () {
		var $img = $('img[data-asrc]');

		if ($img.length === 0) {
			return;
		}

		$(document).one('click.image-swap', function () {
			$img.attr('src', $img.attr('data-asrc'));
		});
	}, 100);
};

Caveat:
The above, as requested, will swap the animated image in if the player clicks anywhere on the page, including the UI bar—which may not be what you actually want. Additionally, since it triggers anywhere, it's only setup to handle one of these image replacements on the page at a time.

You may wish to limit the handled surface area a bit (e.g. to the static image itself).

maysam_a

Thank you!! It worked nicely just one last thing: is there a way to keep the GIF going each time I click on the page? As of now, the GIF plays when I click and if I click again, the GIF doesn't play. Its a one time thing unless I refresh the page.

TheMadExile

maysam_a wrote: »

[…] is there a way to keep the GIF going each time I click on the page? As of now, the GIF plays when I click and if I click again, the GIF doesn't play. Its a one time thing unless I refresh the page.

Ah. You're using a non-infinitely repeating animated GIF, eh?

FIND: (around line 11)

		$(document).one('click.image-swap', function () {

REPLACE WITH:

		$(document).on('click.image-swap', function () {

That change will allow you to click multiple times.

maysam_a

Thanks again! You're a life saver.