Image-as-link runs multiple tasks

Authoring Twine
1

Hey folks,

Just wondering if there’s another way to solve the following. It’s an evolution of an earlier questions solved with relish thanks to @HiEv and @tayruh.

  1. Text appears, 2) followed by an image, which if you click on it, 3) reveals further text hidden underneath the image, and then 4) a second image, which appears below the new text on the page; 5) if you click the second image, it also reveals text beneath it, and a new passage link.

Though the following passage works, as you can see, so far I have only achieved it by timing a fade-in on the second image. Whereas I would prefer the appearance of the second image to be user-dependent, based on when they click the first link (to allow time to absorb the second text, ideally there is a delay before the second image appears). Any thoughts, as always, would be most welcome. Many thanks, Ben

ps I am making use of @Chapel’s fadein macros, which define first a fade time and second a delay.


<div class="imageblock">
<<fadein 3s>>First lines of text.<</fadein>></div>
<div class="imageblock4">\
<<fadein 3s 5s>><span class="txt">Second lines of text </span>\
	<<link [img["Images/Image1.jpg"]]>>
		<<run $(".imageblock4 img").css({ opacity: 0, cursor: "default", "z-index": 1 })>>
	<</link>>\<</fadein>>
</div>
<div class="imageblock2">\
<<fadein 3s 20s>><span class="txt">Third lines of text, with [[a link]]</span>\
	<<link [img["Images/Image2.jpg"]]>>
		<<run $(".imageblock2 img").css({ opacity: 0, cursor: "default", "z-index": 1 })>>
	<</link>>\<</fadein>>
</div>
2

Not sure if the following is going to work as I have never used that fadein macro.

<div class="imageblock">
<<fadein 3s>>First lines of text.<</fadein>></div>
<div class="imageblock4">\
<<fadein 3s 5s>><span class="txt">Second lines of text </span>\
	<<link [img["Images/Image1.jpg"]]>>\
		<<run $(".imageblock4 img").css({ opacity: 0, cursor: "default", "z-index": 1 })>>\
		<<replace "#imageblock2id">>\
			<<fadein 3s 5s>><span class="txt">Third lines of text, with [[a link]]</span>\
				<<link [img["Images/Image2.jpg"]]>>\
					<<run $(".imageblock2 img").css({ opacity: 0, cursor: "default", "z-index": 1 })>>\
				<</link>>\
			<</fadein>>\
		<</replace>>\
	<</link>>\
<</fadein>>\
</div>
<div id="imageblock2id" class="imageblock2">\
</div>

It basically makes use of the replace function of sugarcube, give the imageblock2 an id and change the fade in time from 20s to 5s after the click. The code would probably gets ugly if you nest it again and again.

3

This works! It’s ideal! I might have a follow on question but I’m going to test a few things and come back if necessary. Many thanks, ben