#ROLL OVER IMAGE TO ZOOM IN HOW TO#
#ROLL OVER IMAGE TO ZOOM IN UPDATE#
#ROLL OVER IMAGE TO ZOOM IN CODE#
#ROLL OVER IMAGE TO ZOOM IN TRIAL#

MagicZoom.zoomIn(node) - Activate zoom mode on a particular zoom.

selector - is either reference to selector's DOM element or index number of the selector (index number starts from 0).

MagicZoom.switchTo(node, selector) - Switch to a particular image by selector.

MagicZoom.next(node>) - Go to the next image of a particular zoom.

MagicZoom.prev(node) - Go to the previous image of a particular zoom.

#ROLL OVER IMAGE TO ZOOM IN UPDATE#

MagicZoom.update(node, large-image-url, small-image-url) - Update particular zoom by #id.

Without parameters, reload all instances on the page.

MagicZoom.refresh(node>) - Reload Magic Zoom instance by #id or reference to.

Without parameters, stop all instances on the page.

MagicZoom.stop(node) - Stop Magic Zoom instance by #id or reference to tag.

Without parameters, start all instances on the page.

MagicZoom.start(node) - Start Magic Zoom instance by #id or reference to tag.

Use the Magic Zoom API commands to control your images dynamically: The style can go anywhere in your HTML page after the magiczoom.css file. If placing the style in your HTML page, use tags, for example: You can either add the style to one of your external CSS files or you can place it directly into the HTML of your page. */Д¬ustomize look & feel of the thumbnails in a gallery using the CSS below: * Change the background color font-size + more. * Applies to the caption in zoom window */ mz-lens class:Д¬ontrol the styles of the caption in a zoom window with these CSS: * Applies to the internal zoom window */ДЄlter the look of the lens over the image in the zoom mode with. * Applies to zoom window in the preview mode */ * Applies to zoom window in the magnifier mode */ * Applies to zoom window in the default zoom mode */ Use the following CSS classes in your stylesheets to customize zoom window shape border background + more: Use data-zoom-image-2x attribute in the for the large HD image and data-image-2x for the small high-resolution image:Д¬ontrol the look and feel of your images by using CSS. Supply images for High DPI (Retina) displays.

To start it manually set autostart parameter to false: Retina Images

Magic Zoom starts automatically when page is loaded. If displaying images in a gallery layout, lazyZoom applies to both big and small sized images (not tiny images). However, you can set lazyZoom option to true to load the large image on demand (lazy-loading) when the user triggers zoom on hover or click: Lazy ZoomДЇor the best user experience Magic Zoom automatically preloads the large image. This setting will also deactivate the zoomed image on click. To remove hint, set hint parameter to off: You can configure hint to always appear on the image with hint: always.

#ROLL OVER IMAGE TO ZOOM IN CODE#

For example, if you would like to show gallery arrows (mz-show-arrows) and shade thumbnail completely (thumbnails-style-shaded), your code will look like this:ДЄ hint is displayed on the image to indicate that the image is zoomable and can be controlled with the hint parameter.Д«y default the hint appears once and hides after the first interaction with the image. Tip: Add a space between each cssClass option when using multiple settings. The zoom window is set at the same dimensions as the small image by default.

#ROLL OVER IMAGE TO ZOOM IN HOW TO#

Below, we explain all the Magic Zoom options and how to adjust them, starting with Size. Or, apply for a free license if your site is non-commercial.

#ROLL OVER IMAGE TO ZOOM IN TRIAL#

To remove the Magic Zoomв„ў trial version message, buy a license and upload your licensed magiczoom.js file. Use the settings wizard to create your perfect Zoom. (If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.)Д¬reate a zoom by linking your small image to your big image with a CSS class of MagicZoom:

Reference magiczoom.css and magiczoom.js files before the of your page:.

Unzip the file on your computer and FTP the magiczoom folder to your website directory (on your server), keeping the file and folder structure intact.

Roll over image to zoom in