Advanced 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
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 (European Union) 19% German VAT will be added (zuzüglich 19% MwSt).
Prices are subject to change without notice.
Leave a Comment