@lucid
I've had a bit more time to look at my previous script and I tightened things up a bit...
LAYER Z SHUFFLE TEST JHS v2.hype.zip (15.9 KB)
Just one function {"changeZindex"} used by all the timelines so You do not need a unique function for each timeline. This one function approach makes for easier code management, especially as the number of your images increase.
Each thumbnail has an "On Mouse Click" handler that triggers the function "whatTarget" - which records the value of the thumbnail (element) being clicked and places it in the variable "setZindexEl":
window.setZindexEl = element;
Now just one function changes the z-index and is used by all the timelines: function "changeZindex".
This function uses the value in the "setZindexEl" variable from the "On Mouse Click" handler.
setZindex = hypeDocument.getElementProperty(setZindexEl, 'z-index');
if (setZindex < 9999) {hypeDocument.setElementProperty(setZindexEl, 'z-index', 9999, 0);
} else if (setZindex == 9999) {
hypeDocument.setElementProperty(setZindexEl, 'z-index', 0, 0);}
The next step for tightening the code - if You have a lot of images - might be to have the thumbnail animations completely controlled by JavaScript and dump the current scheme of one timeline per thumbnail ~ large image.
General idea (thought experiment): Triggered by clicking on a thumbnail or large size of a given image:
Based on the z-index of "0" for a thumbnail size...
Store the current (top, left, width, & height) values in matching variables (e.g.)
origLeft = hypeDocument.getElementProperty(setZindexEl, 'left');
then animate to the large size:
hypeDocument.setElementProperty(setZindexEl, 'left', 100, 1.0, 'easeinout');
If the z-index was "9999" (i.e. large size image) then...
animate to the thumbnail size & location using the info in the variables (e.g.)
hypeDocument.setElementProperty(setZindexEl, 'left', origLeft, 1.0, 'easeinout');
"origLeft" is the value of the original left position of the thumbnail.
Additional Note: Using "Scale (Height~Width)"_ would probably look the smoother than animating the width & height properties. I don't know - experiment!