Zoomer HTML5 Component
Fully XML driven for smooth installing and maintaining.
Support for really large image files we have tested it with 6000x6000px .jpg and it is working great.
Support for multiple instances in the same page: you may have as many Zoom Plugins as you want in the same page and each one of them with a different image and different settings.
RESIZABLE You can specify your own canvas width and height.
The entire color theme, background color and graphics (buttons, scrollbar, markers, mini map etc) can be modified and positioned anywhere with ease, this interactive parts are actually images (.png or .jpg) so you can replace them with your own graphics, the graphics can be any size or shape, basically the look of this component can be completely modified, please make sure to view all the samples in the live preview.
Highly customizable image preloader, you can change the radius, thickness and color theme.
The initial zoom percentage and the zoom factor can be set, so you can zoom the image as much as you like just by changing a parameter in the XML file.
The speed of zooming and the speed of movement in response to the buttons, scroll bar or to the mouse wheel or to the gesture on mobile can be adjusted.
Scrollbar for zooming the image in and out (can be enabled or disabled).
All the buttons can be enabled or disabled, including the scrollbar and mini map, Navigation / controls (up, down, left, right, zoom in, zoom out, reset, maximum size, on/off ) buttons can be enabled.
On / Off button for controls: with this feature the visitor will be able to hide the navigation controls in order to see the image behind the controls and the On /Off button can be pressed again in order to make the controls visible.
Small image navigator (mini map) is completely customizable: the navigator size position, border size, border color, border opacity, border radius can be set (can be enabled or disabled).
Markers and/or tool tips: unlimited number of markers is supported, the position of this markers is set with ease in the XML file, when a marker is pressed or touched the image will zoom to the point in which the marker is positioned and align the zoom point to center, on mobile when a marker is touched and hold for a second the tool tip will appear if it is not disabled.
The markers can be used without tool tips, the tool tips can be disabled individually for each marker.
Markers zooming factor percentage: this can be set individually for each marker, for example a 50% (zooming factor percentage) will be half of the initial zoom factor, this means that by setting a zooming factor percentage at 50% the image will be zoomed 50% (half) of the initial zoom factor and align the zoom point to center, basically you can add custom zoom levels for each marker, this is a really handy feature.
The tool tips are highly customizable: the size can be set, the content of this tool tips can be any HTML content , you can add anything you like in them (images, text, div, p , li ...) and also you can style the content with CSS.
The entire Zoomer Template can be used inside a HTML page or be opened in a lightbox window just like the jQuery plugin.