Setting a variable in an image link in the UI bar

Question

I'm currently working on an interactive translation for a picture book, and am trying to figure out an elegant way to incorporate the actual pictures. (The passages are formatted in such a way that I can't stick the images in with the text, and I'm trying to save a straight-up image gallery passage as a last resort.) What I'd like to do is...

1. Place some text in the UI bar linking to the image.
2. Set a variable in the link so that it changes depending on the passage. For example, if the reader is on a passage with the tag "Chapter3," the link in the UI bar will be set as "images/chapter3.png," with the numeral after "chapter" being the variable.
3. Ideally have the link result in a pop-up box displaying the image (like the Saves and Restart message boxes).

I'm unsure if it's possible to set a variable like this within a url in the first place, or if it can be tied to specific passages. Thank you for any advice you can give! I see similar questions have been answered for Harlowe, so hopefully the solution is out there.

Answer 1

You haven't mentioned where you want this link, so I'm going to assume you intend to place it within the StoryCaption or StoryMenu special passages.  The passage tag to story variable bit is easy—though, I question if you need the story variable at all.  Opening the image in a dialog is a bit more advanced, requiring the Dialog API.

For example, the following will use tags like Chapter# to create the image, which it opens in a dialog named Image:

<<link "Show Image">><<script>>
// Set up our variables.
var tag = tags().filter(function (tag) { return tag.startsWith('Chapter'); })[0].toLowerCase();
var src = 'images/' + tag + '.png';

// Set up the dialog and open it.
Dialog.setup('Image');
Dialog
	.wiki('<img src="' + src + '">')
	.open();
<</script>><</link>>

NOTE: The example does not set a story variable, as I'm unsure if you actually need it or only thought you did to achieve the result you wanted.  If you actually do need it, let me know and I can add that to the example.

SEE: <<link>>, tags(), Dialog API.

 

Comments

This is exactly what I was looking for -- thank you so much. (And thank you for including links to the relevant pages from the documentation, too, since I want to read up more on this and learn how to tweak it myself.)