example32_axZmMode.php HOME Examples overview Download Ask a question
example32_v3.php

AJAX-ZOOM mouseover extension, product detail page fictive example

Besides the modules / plugins for diverse e-commerce systems like Magento, for which we already have an integration, you can implement this mouseover zoom extension into your system manually. In the source code you will find all needed HTML and JavaScript to trigger AJAX-ZOOM mouseover extension with default parameters and content data like 360 degree rotations, images and videos.

The illustrative product data to the right (or bottom on mobile devices) imitates the product detail page commonly used in nearly all cart systems. The working part is the product variation switch or color swatch, here labeled as "color variant".

Product detail page title

Mouseover Zoom loading...

$495.90 * %

$879.90 (43.6% saved)

Color variant

  • Availability: available
  • Free of shipping costs!
  • Prices incl. VAT
  • Brand: Xanthippe
Order number: AZ10123

Few important extension options (demo) - show / hide
Inner zoom:
- enabled - disabled
"position": "inside" // or "right", ...
AJAX-ZOOM mode:
- enabled - disabled
"axZmMode": true // or false
Max zoom on click:
- enabled - disabled
"maxZoomMode": true // or false
Gallery:
- enabled - disabled
"galleryDivID": "az_mouseOverZoomGallery" // or false
Gallery position:
"thumbSliderPosition": "left-bottom"
For full list of options (documentation) and background information please see example32.php

The mouseover extension has all needed API to cope with variants selection of any complexity. In this demo we simply define ids for each variation ellement. In your application you should look for events and JavaScript functions which are triggered when the select elements or elements, which represent the selections are changed and hook on these events to trigger the change for images, videos and 360 animations. This has nothing todo with AJAX-ZOOM. It just offers the API to change the content with JavaScript, which should be sufficient to implent it into your system and cope with the potential complexity of variations.