Interactive images for product pages

#1

Hi, is there anyway to prototype an interactive image on Axure? I want to create an image just like on a good e-commerce site, in which the user can turn it, zoom in on it and see al its dimensions.

If it isn’t undoable, will it be possible to create a zoom in effect on a still image on mouse hover or enter (again, similar to e-commerce sites)?

Thanks! :slight_smile:

#2

It’s possible (depending on what you really need/want to do) --but Axure doesn’t have built in functionality for this, of course.

I’ve not done anything like a “360° product viewer” before, but sounds like a good challenge. I’ll start with zooming as I’ve done similar things in the past. Basically, you start with a “max size” image (however large you need it),use the Set Size to shrink it initially, then use Set Size and and Move actions to zoom, and pan if needed. Page 1 of the demo file below shows the basics. I use a dynamic panel as a “repeatable function” to allow for a continuous zoom when the image is hovered. Dragging stops the zoom-in effect and pans the image within a view area.

To allow the user to “turn” a product image, you’ll need an “engine” for this, and suitable images or video… If you can find a javascript API that does this, you might be able to call it via Axure Cloud plugin or javascript injection.

To use “pure Axure” I’ve faked this by taking screenshots from a real 360-viewer (12 images of a shoe at various degrees of “spin rotation” taken from magictoolbox.com). I created a dynamic panel (dp) with 12 states–one for each image. My “engine” uses the Dragged event, where dragging left/right on the dp changes its state to previous or next, based on the value of [[DragX]] (a built-in variable which is positive when the drag motion is “to the right” and negative if “to the left”.

This works, but the spin tends to be crazy fast. I created a duplicate and slowed it down by applying a modulus factor of 5 (where a case of “If [[DragX%5]] equals 0” equates to the case firing every fifth “drag change”, thus slowing it down by a factor of 5). You can change this slowing factor by increasing or decreasing the value of “5”.

I also created a “non math” version with a set of hotspots underneath the dp. When the cursor is over a hotspot, it changes the dp state accordingly.

hover zoom spin.rp (3.1 MB)

I’ll have to think some more on how to combine the hover/click to zoom and pan, along with a drag to spin effect. Especially if your intent is to show a kind of “masked zoom area” or “zoom bubble” like the examples on magictoolbox.com.

#3

I’ve updated my demo to include both drag-to-spin and click-to-zoomed view (with a fixed zoomed-in size) that allows panning over the image to see a mask of the zoomed-in view floating over the product image. See Page 3.

hover zoom spin 2.rp (4.4 MB)

This is fairly straightforward, just took a little bit of “math monkeying” to get a reasonable panning effect when dragging with the zoomed-in view. Here’s my approach:

  • There is a hidden DP (“Zoom Panel”) set to a fairly arbitrary 250x250 px size. Any size smaller than the product image DP should work. This provides the zoomed-in view hovering over the main view area.
    • This Zoom Panel has a larger image than those in the main product DP (“Spin Panel”)
    • I only set up one image/state, but you could add states to match each “regular view” state (in the Spin Panel DP). You could use the Panel State Changed event of Spin Panel to set the state of Zoom Panel to match it, or you could just use the Click or Tap event, or even the Shown event of Spin Panel to do this.
  • Clicking on the product image shows the Zoom Panel, bringing it to front.
    • You should be able to cut & paste the actions from Click or Tap to Mouse Hover to get Zoom Panel to show automatically after about 1.5 seconds of the cursor being over the image and not moving.
    • For ease of this demo, and since there is only one zoomed-in image, it sets the panel state of Spin Panel to State1 and moves Zoom Panel to the top-left of Spin Panel. The big image (“imgZoom1”) within Zoom Panel is also moved to (0, 0).
    • The global variable I created for the demo in Page 1, “ImageRatio” is reused here to calculate the scaling factor of imgZoom1 --the ratio of the regular view to the large view. This is used to “boost” the movement of imgZoom1 when dragging Zoom Panel to pan around.
  • Dragging the Zoom Panel moves it around, with boundaries set to limit to the movement to the area of Spin Panel (the regular product view)
  • As the Zoom Panel moves, the image within–“imgZoom1”–is moved in the opposite direction, creating the effect of a mask area (a virtual hole through which the large image can be seen)
    • This is where the “boost factor” (ImageRatio) comes into play, multiplying the amount of drag. For example, if the large image is twice the size of the regular image, it would need to be moved twice as much within the same amount of space.
    • Setting the boundaries to limit the movement of imgZoom1 was (for me) the tricky part. I ended up using boundaries only for the bottom and right. When panning, imgZoom1 needs to move left and up, less than zero, but when Zoom Panel reaches its leftmost or topmost boundary, then imgZoom1 needs to be limited to zero. So, I used a few cases to test for these conditions and just pop imgZoom1 to “zero” in the horizontal and/or vertical direction.

Since the math uses relative pointers you should be able to replace the images (and number of states in each panel as needed) and change the sizes of each dynamic panel to suit your needs.