Advanced responsive jQuery Mouseover Zoom together with AJAX-ZOOM fullscreen on click
Despite looking similar to other mouseover zoom scripts this AJAX-ZOOM mousehover extension offers more than it lookes like at first. When the user clicks on the lens AJAX-ZOOM with real high resolution tiled view opens at several modes, try it:
In addition the size of the flyout window for simple mousehover effect can instantly fit to browsers window size or some other element (e.g. text to the right) so beeing responsive. And it works on touch devices like iOS and Android.
The sliding thumbnail gallery below the mousehover image is optional. It can be replaced or disabled. The one you see here is one of AJAX-ZOOM extensions too. It is highly configurable, skinable, responsive and touch friendly - see more examples here. The previously used "jCarousel" has been completly removed from this example.
On default only the high resolution "master images" (source images) need to be defined. All thumbnails and flyout view images are instantly generated by AJAX-ZOOM "image server". The size of the flyout image can be set to e.g. 1200x1200px, which are at most 1.44 Mio. pixels. For a 21 megapixels master image these are around 5-7% of the actual resolution and size. By clicking on the lens the user can explore the entire image with AJAX-ZOOM, which utilizes image tiles technology, so the entire master image never loads into browsers cache and can be even protected from direct access over http e.g. with htaccess. Alternatively to AJAX-ZOOM PHP based image server the paths to these flyout "preview" images can be hardset (see "images" option below) to point to some static (already scaled) images.
Link: check all options for mouse over zoom
Demo watermark: - Enabled - Disabled
Enabling watermark allows effective protection of Your original source images without any compromises.
AJAX-ZOOM doesn't require any browser plugins such as Flash, Java or Silverlight. It works great on iPhone/iPad and other mobile devices.
AJAX-ZOOM is perfect for E-Commerce, extended product presentations and other applications, where high quality images make the difference.
AJAX-ZOOM can also protect high resolution images. Thus AJAX-ZOOM allows photographers and digital stock photography companies to present the real quality of an original sized image without being worry about copyright infringement.
AJAX-ZOOM does not require any cost-intensive investments in hardware. There is also no need to install a third party imaging server. All You need is a standard web server with PHP or hosting account to make AJAX-ZOOM work on Your website.
As a Phalanger compiled version AJAX-ZOOM can run as 64bit application on ASP.NET. Besides the "native" PHP GDlib functions AJAX-ZOOM supports ImageMagick® for optimized speed and quality.
AJAX-ZOOM can proceed images "On-The-Fly" or it can batch convert thousands of images with just a couple of steps. This means that AJAX-ZOOM can be integrated into already productive websites filled with any number of products and images within a shortest period of time. Give it a try!
In order to understand why AJAX-ZOOM provides solid protection to your photos it is necessary to understand how image zoom technology normally works:
The most efficient way to provide high resolution imaging on the web can be achieved by making an "image pyramid" out of the source image and slice it into small tiles, see the scheme to the right. Whenever the user requests a portion of the image while zooming only couple needed tiles of a level are sent to the client's browser. However, since these tiles are loaded by the client's browser or can be accessed over http, they can be theoretically reassembled (stitched together), thus restoring the entire original image.
AJAX-ZOOM has various options to watermark the tiles and all other cached images instantly! Since original big sized image never loads into browser cache the whole parent directory while contains high resolution images can be protected e.g. with htaccess from being accessed over internet.
There are numerous ways of how to integrate AJAX-ZOOM into your HTML. The easiest way to explore the possibilities is checking the examples. There is no "best" integration solution as it depends on how AJAX-ZOOM needs to be displayed, e.g. in a lighbox, how the information about the desired images is passed (see Defining the images) and it depends on your possibilities to edit the sourcefiles of a content management system, blog or online store.
The following example represents only one posible solution:
As we are constantly trying to improve our software, Your wishes, objections and suggestions are greatly appreciated. Please do not hesitate to contact us or leave a comment.
Licence / Prices
* All prices are excluding VAT; in the EU (European Union) this offer exclusively addresses professional customers which have a valid VAT-ID;
this does not affect customers from outside of the European Union; for customers located in Germany 19% German VAT will be added (zuzüglich 19% MwSt);
If you are from an EU country and do not have a valid VAT-ID yet, then please ask your web development company which has a valid VAT-ID
to purchase AJAX-ZOOM for you; if for some reason this is not possible, then please contact AJAX-ZOOM support;
prices are subject to change without notice.
Leave a Comment