Can I build a slider which allows users to zoom in and out on a page?

When I open a preview of the project I’m working on, I can zoom in and out just using the webpage magnification (in the upper right corner of any browser). However, this magnification jumps by 10%, so it isn’t granular enough for me. Is there any way I can build a slider in Axure that allows me to zoom in and out of the preview with a precision of 1%?

I think the short answer is, “No.”

…and the long answer is, “Maybe, but good luck!” :wink:

You might be able to fake it with a screenshot that you resize with a Set Size action. This could demonstrate the basic concept–which is the essence of a prototype–but if you need functional widgets to be resized and moved, it might get exceedingly cumbersome.

You might be able to place everything in dynamic panel(s) and use a system of proportional rules/algorithms to set sizes and move locations of widgets. For example a header might have a size of 100% width and 10% height relative to the dynamic panel (or window), a banner image might have a size of 80% width (centered) and 15% height of window (or maybe 150% height of header), a button could have a few breakpoint sizes and always placed 20 px (or maybe 5% height) below header, etc. Then the RESIZED event for each dynamic panel could set sizes and locations for all widgets inside it. Hmm… maybe a set of hotspots could be used as a proportional column grid, and another set as a row grid to make it easier to place widgets consistently.

As your slider is increased to zoom in, the outermost dynamic panel could be moved a few px up and to left and resized a few px larger (and visa-versa for zooming out) thus triggering that dp’s RESIZED event.

All this could work if your content is limited and fairly simple.


This thread discusses some approaches using CSS or Javascript, but there’s not a straightforward or reliable way to do this, really.