example32_axZmMode.php HOME Examples overview Download Ask a question / privacy policy / imprint
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 functioning 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 provides all needed API methods to cope with selection of single or multiple variants of a product. In this demo we simply define ids for each variation element. In your application, you should look for events and JavaScript functions, which are triggered when the user selects or clicks on the UI representing the variations and hook on these events to trigger the change for images, videos and 360 animations. These integrational steps are not directly related to AJAX-ZOOM. AJAX-ZOOM does only offer the API to change the content over JavaScript, which should be sufficient to implement it into your system and cope with the potential complexity of variations.