jQuery Mouseover Zoom together with AJAX-ZOOM fullscreen on click
This jQuery mousehover extension is somewhat different! At first glance it looks like a regular mouseover zoom / hover zoom alike many others free and paid scripts. In fact it is, however it is only a preview of the real high resolution AJAX-ZOOM view, which is opened at fullscreen when you click on the preview image or lens (try it).
Despite the similarity to equally looking scripts this mouseover AJAX-ZOOM extension offers some very interesting features / options like fitting the flyout zoom window to inner browsers size (default setting that can be changed to fixed size ofcourse). It works on touch devices like iOS and Android (open this page on your iPad), instantly defaults to "inner zoom" if there is no space on the screen and others.
In addition only the high resolution master images (source images) are needed 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 Mio. pixels master image these are around 5-7% of the actual 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 + htpasswd.
Alternatively to AJAX-ZOOM PHP based image server the paths to these flyout "preview" images can be hardset, pointing to some static (already scaled) images.
Link: check all options for mouse over zoom
SEE MORE VARIATIONS AND DEMOS
2012-11-25 smoother animations on desktop computers (patch Ver. 3.3.0)
2012-01-30 3D VR (multirow Z axis) implemented. See this example.
2012-01-18 Pinch Zoom (gesture zoom) beta version released.
2011-09-18 - Magento implementation has been completly revised. Now AJAX-ZOOM can be displayed in at least 4 different mods, e.g. as flyout zoom (mouseover zoom) with dynamic imaging.
2011-08-03 - Ver. 3.3.0 Runs very smooth on iPad.
2011-07-15 - Ver. 3.2.2 Now image tiles can be watermarked.
2011-05-29 - Ver. 3.2.0 Fullscreen mode.
2011-04-06 - Ver. 3.1.0 New interesting example - hover over the image zoom.
2011-03-06 - Ver. 3.0.2 Patch 2011-03-06 The preload process for 360 degree spin images has been accelerated up to 10 times faster.
2011-02-13 - Ver. 3.0.2 Patch 2011-02-13 Integration of 360° product spinner into XT:commerce (xtcModified, VEYTON, Gambio), see this example.
2011-02-06 - Ver. 3.0.2 Patch 2011-02-06 Integration of 360° product spinners into Magento, see this example.
2010-12-14 - Ver. 3.0.2+ Added basic support for touch events on mobile devices like iPhone / iPad etc.
2010-11-22 - Ver. 3.0.1+ VR Objects 360° - 3D Spin & Zoom feature, see this example.
2010-10-24 - Now works on Windows localhost, e.g. with XAMPP.
2010-10-20 - Added compatibility to xt:Commerce VEYTON 4.
2010-10-18 - Ver. 2.1.6+ Oxid eSales Plugin.
2010-10-11 - Ver. 2.1.5+ added support for JPG, TIF, PNG, BMP, GIF und PSD image types.
2010-09-14 - Patch to Ver. 2.1.4 No need to adjust the paths for quick testing manually any more. The paths are detected automatically.
2010-07-28 - xt:Commerce, xtcModified plugin is released with Ver. 2.1.3. See the xt:Commerce demo store.
2010-06-26 - Magento store extension is released with Ver. 2.1.0. See the Magento demo store.
2010-06-10 - since version 2.0.0 it is possible to load image tiles directly without stitching them together serverside. Here is an example of this new feature.
Modules & Plugins Ecommerce
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 cut it into small tiles, see the scheme to the right. Whenever the user requests a portion of the image only the needed tiles of a level are sent to the client's browser. However, since this tiles are loaded by the client's browser or can be accessed over http, they can be easily reassembled (stitched back together), thus restoring the entire original image. To get worse - this procedure can be automated.
In its core AJAX-ZOOM uses the same image pyramid technology, but instead of sending the tiles directly to the browser AJAX-ZOOM can put them first together on the server side, optionally watermark the zoomified image and only then send the requested portion as one picture to the client. Neither the tiles nor the original image are ever loaded by the client. Both server locations - with the original images and tiles - can be .htpasswd or otherwise protected.
Optionally AJAX-ZOOM can crop from the original image without making the tiles. This procedure is however slow and highly memory-consuming. The fastest way however is to load the image tiles directly as described above. From version 2.0.0 on it is also possible with AJAX-ZOOM, see this example.
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
* For customers located in Germany and none business customers from EU 19% VAT will be added. Limited time offer. Prices are subject to change without notice.
360° / 3D photographers and equipment manufacturers can request a commercial license for their own websites for FREE!
Leave a Comment