Text Wrap Image + Zoom

Text Wrap Image + Zoom

Modal

Sometimes it's usefull to show an image at a fairly small size and have a zoom up function to show it larger in an overlay. It's hardly worth loading the scripts for a lightbox function for one image so this design uses a very simple, custom jQuery plugin.
On Load Image
The text wrapped image is the trigger to open the modal with the zoom image and has a spyglass icon and shows the zoom-in cursor on hover.
Zoom
The zoomed image has a maximum width setting to control its size and can be scrolled if it is larger than the browser/device window height;
It is tnserted in two size. The demo images are 1960 x 800px and 720 x 480px.
The images are lazy loading by default.
Overlay
The overlay has controls for background color and its opacity and has a close button at the top right. The overlay can e closed by clicking or tapping it anywhere.
Icons
Both icons are created using CSS so the colors can be changed if required to suit the image and the overlay color.
Breakpoint
On mobile phones the image becomes full width, the text is below the image and the zoom icon disappear is hidden. The zoom function removed since the image is shown at full device width anyway.
Options
Just the same as the ThemeKit Text Wrap Image widget this one can switched to having the image float right and an optional link bar for internal/external links.