Replace image with deep zoom multi-resolution image

AJAX-ZOOM demo

Replace an image with AJAX-ZOOM viewer on click

Suppose you have a two or more column responsive layout, where the main container's width is responsive too. That is a typical situation for CMS themes like the many modern ones available for WordPress today. Now you want to place high-resolution images between texts without having the users and Google preload heavy data on page load while providing a high-resolution image viewing experience on demand. AJAX-ZOOM is a perfect tool to implement exactly that. You will find the source code in this example.

With the provided AJAX-ZOOM jquery.axZm.hoverThumb extension, you can adjust the mouse hover effect of the low-resolution preview image, group images by data attribute, and much more. As HTML markup, only "img" tags with a few data- attributes are required for the "jquery.axZm.hoverThumb" extension to notice them and connect to the AJAX-ZOOM viewer. For the click event, you choose between replacing the preview image with AJAX-ZOOM viewer directly as shown on this page, opening the viewer in a responsive modal box, or opening it in fullscreen mode.

For embedding the player multiple times between a text and without hover effect, which is also possible for the 360-degree product views, please see this example.

---

AJAX-ZOOM examples with Replace

example13

Load AJAX-ZOOM viewer inside an iframe. This is the simplest way to put in place AJAX-ZOOM anywhere.

You can place as many instances on one page as you like. Full-screen views work on desktop and mobile devices as well. Using "lazyload" to postpone loading of the content inside the iframe is possible and the example demonstrates how to implement it.

The content of the viewer inside iframe can be an image gallery, a 3D / 360 product rotation or one high-resolution image with progressive zoom. Since AJAX-ZOOM viewer is responsive, it will adjust to the size of responsive iframe automatically.

View

example6_cms

Responsive inline images with hover zoom effect and progressive zoom feature on click. The AJAX-ZOOM viewer with progressive zoom feature opens in responsive lightbox or at fullscreen.

You can also configure the extension to replace the entire image with AJAX-ZOOM viewer on click. The viewer fills the space of the image. The user can close the viewer and restore the inline image.

In the example, you can switch between these diverse opening modes.

It is great for editorial content because the HTML essentially consists out of an "img" tag. Editors can easily insert this tag into text via WYSIWYG editor of any CMS.

View

Modules / plugins

Using the modules/plugins is optional! It is not required to use them. You can use AJAX-ZOOM as a stand-alone application or integrate it manually into nearly all systems.

However, if a module for your CMS or e-commerce/shopping cart system is available, it tremendously facilitates and speeds up the integration. Provided that your server meets technical requirements, you can have AJAX-ZOOM up and running within a few minutes. You can install and configure these AJAX-ZOOM modules with just a few clicks and without writing a single line of code.

Available are modules for Magento, Prestashop, WooCommerce (WordPress), Opencart, Shopware, and Oxid. The last two are commonly used in German-speaking countries.

Compatibility

License

The license price primarily depends on the number of different images that display in the AJAX-ZOOM image viewer on a domain. Unlimited options are available. The costs for the regular licenses are one-time payments! You can find the complete license agreement and price list on the download page. Before ordering, we advise you to download and test the demo (light) version within your development environment.

If necessary, we can issue time-limited license keys free of charge. However, AJAX-ZOOM and AJAX-ZOOM modules / plugins for diverse CMS and shopping carts should work with few restrictions without entering any licensing data! If something does not work as expected, there must be a different reason than missing license. Do not hesitate to contact AJAX-ZOOM support if you encounter any technical difficulties.