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.
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.
5) Do the same with the rest of the images.
And then simply click Simulate and enjoy!