Solved: click-to-scale gallery resolution problem

Hey gang-

I was being plagued with an issue that may have hit you as well, so I thought I'd share the solution. The problem was that when using some JS to scale images, the larger image was clearly using the resolution of the low-res thumbnail. I found the way to fix this.

The attached hype file uses a click-to-scale technique found on this thread:

I can't thank enough the regular contributors for their generous time here - you're truly all amazing to be sharing so much.

The reason this technique is superior to using normal animations is that you don't have to manage multiple Animations on many elements, so you can easily add more thumbnails to your set..

Because this seems to be a common question, I'll re-cap how to make a click-to-scale gallery:

A: Copy the javascript "showHide" from the attachment (again, this is from the above thread. I'm not that clever)

down-res-optimization.hype.zip (1.6 MB)

B: Copy Display Name into the Unique ID...

C: Add the action to the element:

Run, and you can click on the images to make them go full-screen.

THE PROBLEM: you will note when you click on the right image that the quality is very poor. This is because Hype is optimizing the image to match it's scaled as you see it in the preso. It isn't aware that the image get's scale, so it only saves a 200-pixel high image. Normally, this is an incredibly great feature and the correct default setting IMHO, but it pokes us in this instance.

THE SOLUTION:

In Resources, select the element and disable Pre-Optimize:

That should do it, as you'll see with the image on the left.

2 Likes