A beautifully simple stack for adding 'zoom' magnifications to images. Zoomy is a great way to add magnification to images; without needing to depend on links opening in new windows or popups. Magnification can be triggered on mouseover, grab or click. Plus there are a couple of other useful options available in this stack.

Example

Here is working example of Zoomy. Try zooming in on the Canadian geese to view them in closer detail.

Zoomy Image


Setup

Install Zoomy into Stacks and RapidWeaver in the normal way. Open the Stacks Library and drag a copy of Zoomy into your page. Within the Stacks side panel for Zoomy, you can configure the image source and other items.

You can either use an image dragged and dropped into RapidWeaver or an image stored at a warehouse location, by changing the Image Source setting. A large image will be scaled-down to fit within the Zoomy stack. When you preview the page and mouseover the image, the image will zoom to its original size. Within the Zoomy settings, you can customise the trigger for the zoom effect, the speed of the transitional effect, and the mouse cursor style displayed in desktop web browsers. If using images dragged and dropped into Stacks, you may need to double-click the image and edit it to remove sizing constraints.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.