Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to add interactive thumbnails to your wireframes


Add interactive thumbnails to your wireframes with the help of this tutorial. In the example below, when you hover over a thumbnail, it gets bigger.

This example uses the ‘Change style’ action and you can build it using the Dynamic panel widget. When the user hovers on an image thumbnail, the background of the Dynamic panel changes and zooms in on the image.

You can download the example below here.

Add interactive thumbnails to your wireframes

1) Create a new prototype, add four images to the canvas and drag a dynamic panel below them.

2) Select the first image and go to the Events tab. Click the ‘Add event’ button and select the event type ‘On mouse over’ + ‘Change Style’

3) Select the Dynamic panel you dragged before. 

4) On the bottom part of the events dialog, select ‘background‘ and define the same image file you see in the thumbnail. Click OK.

Add interactive thumbnails to your wireframes: events

5) Do the same with the rest of the images.

And then simply click Simulate and enjoy!

Next tutorial > Simulate Scrollbars in your interactive wireframes