EverWeb Codebox logo

EverWeb Widgetbox 3

Touch Image Zoom Widget

Touch Image Zoom

Touch | Hover | Grab to Zoom

Image zoom is usually implemented through hover which is obviously not much use for touch devices like the iPad and iPhone.
The image zoom in this widget is created using one image which needs to be imported at a resolution which gives the required quality.
The image in this demo was imported at 1200 px wide by 900 px high with a file size of 130Kb. It is displayed in a frame which is 360 x 270 px so the magnification is almost four times when zoomed.
The widget creates a hover zoom with the option for a click to zoom on computers.
On tablets and smart phones the method is to touch and drag with a finger.
Lifting the fingertip off the screen will return the image to the original size.

Touch Audio MP3 Widget
Touch Zoom WidgetHover zoom
Touch Zoom WidgetClick to zoom

Widget Settings

Choose the image and enter alt text for SEO.
Set the image frame to the required width and height using the drag handles or the Metrics inspector.
Set the border width and color if required.
Enter the instructions if required and check the box to display them.
Set the font family, size color and background color for the instructions.
Check the box for click to zoom on computers if required.
Note that it doesn't matter what method of zoom is selected when the widget is used on a site designed for touch devices.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …

This widget is included in the Touch Image widget pack.