Need Help With Thumbnail Selector Highlight in Image Slider

I thought I’d put this question out to the community. Please hold off on custom code solutions all your javascript wizards. I’m trying to figure out how to solve the following problem just using timelines and timeline actions, and other built-in Hype techniques.

I figured out this pretty nifty technique for making an image slider gallery that can be controlled via both thumbnails and arrows. I also have button controls making a cyan border appear around a thumbnail, plus a shadow, plus a slight vertical movement up, on hover. Then, I want that same cyan border (but not the shadow or movement up) to stay when the thumbnail is clicked on.

If you hover over a thumbnail, those button controls work. If you use the arrows to advance through the images, you’ll see the thumbnail animations I put into that timeline for the border color to change from white to cyan.

I can’t get it to work with selecting individual thumbnails though. The problem is the button controls take ownership of the border color, interfering with any timeline animations I try to put in to make that border cyan upon click. If anyone wants to figure out a technique for me, I’d appreciate it! Also, please don’t just speculate about a solution, please play with the project file and make sure the technique you come up with works.

SliderTemplate.hype.zip (984.1 KB)