To remove hint, set hint parameter to off: You can configure hint to always appear on the image with hint: always. By default the hint appears once and hides after the first interaction with the image. Hint A hint is displayed on the image to indicate that the image is zoomable and can be controlled with the hint option. As long as the data-gallery name is the same, the images will be grouped, for example: Images can be combined so they all appear in the same expanded view, for example these images are all using group: īut if different images relate to specific subjects, you can choose which images are shown as thumbnails in the enlarged view. This is achieved using data-gallery attribute in the tag. To remove thumbnails, simply put no-expand-thumbnails into the cssClass parameter: For images which aren't part of a gallery (spread around web page) you can still group them together so they will appear as thumbnails in the expanded view. Group thumbnails If images combined into a gallery, the thumbnails are displayed underneath the image in the expanded view. For example, showing gallery arrows ( mz-show-arrows) and full thumbnail highlight ( thumbnails-style-shaded), your code will look like this: Įxpanded view Expanded view displays the enlarged image in a distraction free mode. Tip: To use multiple cssClass settings, add them to the same cssClass parameter with a space between each parameter. Zoom size The zoomed area is automatically set at the same dimensions as the small image, for example: Now let's look at how to customize Magic Zoom Plus. To remove the Magic Zoom Plus™ trial version message, buy a license then overwrite the magiczoomplus.js file with your licensed version.

You've done it! Get inspiration from these examples or use the wizard to choose your perfect settings.Link your small image to your large image with a class of MagicZoom:.If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page. Reference magiczoomplus.js and magiczoomplus.css files before the of your page:.Unzip the file on your computer and FTP the magiczoomplus folder to your website directory (on your server), keeping the file and folder structure intact.Magic Zoom Plus for ecommerce Templates.Magic Zoom Plus for GoDaddy Shopping Cart.Magic Zoom Plus for AspDotNetStorefront.

Roll over image to zoom in