0 votes
by (120 points)

I have a cycle, which is similar to:

{
    (set: $choices to (array: "path_to_1st_image", "path_to_2nd_image") )
    (if: $choicesCount >= $choices's length)[(set: $choicesCount to 1)]
    (else:)[(set: $choicesCount to it + 1)]
    (set: $cyclingResult to $choices's $choicesCount)
    (link: (text: $choices's $choicesCount))[(display: "Cycling")]
}

THis way i cycle trough the path of the images, but I don't want to see the path. I want to be able to click on an image and go to the next one.. what can I do?

I tried to use

<img src=(print: $choices's $choicesCount) width="50" height="50">

in the link section, but it doesn't work. the page doesn't load.

Thank you!

 

 

1 Answer

0 votes
by (159k points)

Try the following solution, it consists of two parts:

1. TwineScript to place within the Passage you want to see the Image Link in.

{
	(set: $images to (array: "path_to_1st_image", "path_to_2nd_image") )
	(set: $imageIndex to 1)
	|workarea>[(display: "DisplayImageLink")]
}

2. The contents of the DisplayImageLink passage.

{
    (if: $imageIndex > $images's length)[
		(set: $imageIndex to 1)
	]

	(set: $image to 
			'<img src="' +
			(text: $images's ($imageIndex)) +
			'" width="50" height="50"')

	(link: $image)[
		(set: $imageIndex to it + 1)
		(replace: ?workarea)[\
			(display: "DisplayImageLink")\
		]
	]
}


The above examples contains a number of changes to your original example.

1. It replaces your recursive displaying of the current Cycling passage with a technique that continually  overwrites the current contents of a workarea named hook with a new copy of the contents of a child DisplayImageLink passage.

The reason for not using your recursive method is because each time the link is selected it embeds another copy of the Cycling passage into the current page, which increases the structural depth of the HTML elements making up the pages, which will eventually lead to a depth error. The following is a simplified examples of the structure changing.

<!-- Before the link is selected. -->
<tw-passage>
	<tw-hook>
		<tw-link tabindex="0" data-raw="">path_to_1st_image</tw-link>
	</tw-hook>
</tw-passage>


<!-- After the link is selected the first time. -->
<tw-passage>
	<tw-hook>
		<tw-expression type="macro" name="display">
			<tw-hook>
				<tw-link tabindex="0" data-raw="">path_to_2nd_image</tw-link>
			</tw-hook>
		</tw-expression>
	</tw-hook>
</tw-passage>


<!-- After the link is selected the second time. -->
<tw-passage>
	<tw-hook>
		<tw-expression type="macro" name="display">
			<tw-hook>
				<tw-expression type="macro" name="display">
					<tw-hook>
						<tw-link tabindex="0" data-raw="">path_to_1st_image</tw-link>
					</tw-hook>
				</tw-expression>
			</tw-hook>
		</tw-expression>
	</tw-hook>
</tw-passage>

... as you can see, the link (the tw-link element) is structurally getting deeper and deeper each time it is selected, which will soon result in an error.

2. There is a subtle difference between the (text:) macro and the (print:) macro, although both can be used generate textual (String) output.

The (text:) macro returns a String value which you can then do something with, like embed that value into the visual output of current page. The (print:) macro automatically embeds the value it generates into the visual output of current page (as a Plain Text Node), which is why you can't use it as a parameter.

3. Generally the value of a HTML element's attribute needs to be wrapped in quotes.

<img src="the value of the src attribute" width="50" height="50">

... which is one of the reasons your img element wouldn't of worked. Another of the reasons was you were using the (print:) macro which was resulting in an invalid HTML structure, which could conceptually look something like the following.

<img src="" />
<plain-text-node>value of the (print:) macro</plain-text-node>
<img width="50" height="50" />

The $image variable in my example demonstrates how to dynamically construct a String representation of a HTML img element, which it then uses as the parameter of a (link:) macro. You could also directly embed contents of the $image variable into the current page like so

(print: $image)


4. Variables that include 'Count' in their name (like $choicesCount) generally represent the total number of the related things (like there are 2 images in your $choices array) and not which of those things is currently selected, where as variables with words like 'Index', 'Position', 'Offset' etc are usually used to indicate which of the collection of items is currently selected.

note: You may want to consider updating to the Harlowr 2.x story format, as it has more features than Harlowe 1.x

by (120 points)
Thank you Greyelf for your reply. I have tried your code and it works perfectly! I also tried to have more than one image on my screen, and creating another DisplayImageLink passage, i managed to do it.

My goal is to have a lock which is opened only with the right sequence of symbols (or colour). I am going to arrange 4 or 5 of these images (it is the same array, only cycled using a different index) and create the lock.

Thank you also for the explanation of my errors..

Have a nice day!
...