example6.php HOME Examples overview Download Ask a question / privacy policy / imprint
example7.php

About

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

You can also configure the $.azHoverThumb extension to replace the entire image with the AJAX-ZOOM viewer on click. The viewer fills the space of the image. Users are able to zoom in and out the high-resolution version of that image at the same position as the editorial image, then close the viewer and restore the small inline image.

Try various open mods

Open AJAX-ZOOM at fullscreen mode
Open AJAX-ZOOM in responsive "Fancybox"
Open AJAX-ZOOM in regular "Fancybox"
Open AJAX-ZOOM in "Colorbox"
New: replace image with AJAX-ZOOM player
Enable monitor size fullscreen:
- enable - disable

It is excellent for editorial content because the HTML essentially consists out of an img HTML tag. Administrators can easily insert this tag into text via WYSIWYG editor of any CMS like WordPress.

You can place an unlimited number of images between text with a nice adjustable and styleable hover effect. If you define the data-group attribute for the images, AJAX-ZOOM builds a gallery out of images with the same attribute value.

Compatibility

Provided that other scripts and CSS on your page support old IE, you can use this setup even for IE 7 compatibility.

AJAX-ZOOM - responsive image hover zoom (gallery) effect + fullscreen progressive zoom on click

Below is the actual demo of the images. Click on the images to open the high-resolution version of that image in AJAX-ZOOM player. You can switch the way AJAX-ZOOM opens by changing the "open mods" radio boxes. In your implementation, you would simply statically set that option over ajaxZoomOpenMode option of the $.azHoverThumb extension. (Texts are taken from Wikipedia, we want to simulate some real content here...)

BMW 327 Cabriolet

The first 327, launched in 1937, was a cabriolet. In 1938, this was joined by a fixed head coupé version. The car was shorter and lower than its sedan counterpart, but shared the famous BMW grill and a streamlined form representative of the more progressive designs of the 1930s.

During the 1930s, Eisenach was the centre of BMW’s automobile manufacturing. In 1945, Eisenach was occupied by United States forces. However, the wartime allies had already agreed that Thuringia would fall within the Soviet occupation zone. BMW's automobile factory in Eisenach was not fully destroyed, and assembly of the 327 resumed. Clear production figures are hard to obtain, but many of the 327s surviving with collectors into the twenty-first century were post-war products. After the war, it became clear that the Soviets would not return the Eisenach factory to BMW.

BMW-branded automobiles produced between 1946 and 1951 were therefore being produced outside the control of BMW headquarters in Munich. This cause a protracted dispute concerning title to the BMW brand and other assets, but in 1952 it was determined that Eisenach-produced models such as the 327s should be badged as EMW (Eisenacher Motoren Werke) rather than as BMW (Bayerische Motoren Werke). EMW changed their badge from BMW's blue and white roundel to a red and white roundel.

Jaguar MK II 340

The Jaguar Mark 2 is a medium-sized saloon car built from late 1959 to 1967 by Jaguar in Coventry, England. Twelve months before the announcement of the XJ6 the 2.4 Litre and 3.4 Litre Mark 2 models were renamed to Jaguar 240 and Jaguar 340 respectively. The previous Jaguar 2.4 Litre and 3.4 Litre models made between 1955 and 1959 have been identified as Mark 1 Jaguars since Jaguar produced this Mark 2 model. Until the XJ, Jaguar's postwar saloons were usually denoted by Roman numerals (e.g. Mark VII, Mark VIII) while the Mark 2 used Arabic Numerals, denoted on the rear of the car as "MK 2".

In September 1967 the 2.4 Litre and 3.4 Litre Mark 2 cars were rebadged as the 240 and 340 respectively. The 3.8 Litre model was discontinued. The 240 and 340 were interim models intended to fill the gap until the introduction of the XJ6 in September 1968. The 340 was discontinued on the introduction of the XJ6 but the 240 continued as a budget priced model until April 1969; its price of £1364 was only £20 more than the first 2.4 in 1956.

Output of the 240 engine was increased from 120 bhp (89 kW; 120 PS) @ 5,750 r.p.m. to 133 bhp (99 kW; 135 PS) @ 5,500 r.p.m. and torque was increased. It now had a straight-port type cylinder head and twin HS6 SU carburettors with a new inlet manifold. The automatic transmission was upgraded to a Borg-Warner 35 dual drive range. Power steering by Marles Varamatic was now available on the 340. Servicing intervals were increased from 2,000 miles to 3,000 miles. There was a slight reshaping of the rear body and slimmer bumpers and over-riders were fitted. For the first time the 2.4 litre model could exceed 100 mph, resulting in a slight sales resurgence.

The economies of the new 240 and 340 models came at a cost – the leather upholstery was replaced by Ambla leather-like material and tufted carpet was used on the floor—though both had been introduced on the Mark 2 a year earlier. Other changes included the replacement of the front fog lamps with circular vents and optional fog lamps for the UK market. The sales price was reduced to compete with the Rover 2000 TC.

Alfa Romeo Bertone Giulia Sprint GT

The Alfa Romeo 105/115 series Coupés were a range of cars made by the Italian manufacturer Alfa Romeo from 1963 until 1977. They were the successors to the celebrated Giulietta Sprint coupé and used a shortened floorpan from the Giulia Berlina car.

The Alfa Romeo Giulia Sprint GT was the first model introduced, and was manufactured from 1963 to 1966. It featured the original form of the Bertone body with the scalino (stepped) or "step front" (the leading edge of the hood/bonnet sat 1/4 an inch above the nose of the car). It can be most easily distinguished from other models by the following features:

  • Badging: chrome script reading "Giulia Sprint GT" on bootlid, one round Alfa Romeo badge on the grille heart, Bertone badges behind the front wheelarches.
  • Flat, chrome grille featuring a plain rectangular mesh with no bars.
  • Single-piece chrome bumpers
  • Dashboard with a flat, tilted panel finished in grey crackle.

The car was fitted with the 1570 cc displacement version of the engine (78 mm bore × 82 mm stroke, 6.38 L oil sump, 7.41 L radiator). Dunlop disc brakes were fitted all around. The rear brakes featured an unusual arrangement with the slave cylinders mounted on the axle tubes, operating the calipers by a system of levers and cranks. 31,955 Sprint GTs were produced.

Rolls-Royce Silver Dawn

The Rolls-Royce Silver Dawn is a car that was produced by Rolls-Royce at their Crewe works between 1949 and 1955. It was the first Rolls-Royce car to be offered with a factory built body which it shared, along with its chassis, with the Bentley Mark VI until 1952 and then the Bentley R Type until production finished in 1955. The car was first introduced as an export only model. The left hand drive models had a column gear change, while right hand drives had a floor change by the door. Only with the R Type based model was it officially available on the home market, from October 1953.

A mere 760 were produced between 1949 and 1955. Earlier models up to circa May 1954 had a different fascia (dashboard) from the Bentley Mk.VI and 'R' Type, and were fitted with a single exhaust system. Later models from the SRH chassis series had the Bentley style fascia and the twin exhaust system, as fitted to the Bentley 'R' Type. On the Standard Steel cars throughout the production history, all the body panels forward of the bulkhead/firewall were slightly different from those fitted to the Bentley.

JavaScript & CSS files in Head


<!-- jQuery core, needed if not already present! -->
<script type="text/javascript" src="../axZm/plugins/jquery-2.2.4.min.js"></script>

<!-- AJAX-ZOOM core, needed if openMode is not iframe! -->
<link rel="stylesheet" href="../axZm/axZm.css" type="text/css">
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

<!-- AJAX-ZOOM thumbGallery extension, needed! -->
<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.hoverThumb.css" type="text/css">
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.hoverThumb.js"></script>

<!-- Fancybox lightbox javascript, please note: it has been slightly modified for AJAX-ZOOM, only needed if ajaxZoomOpenMode below is set to "fancyboxFullscreen" or "fancybox", optional -->
<link rel="stylesheet" href="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.css" media="screen" type="text/css">
<script type="text/javascript" src="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.js"></script>

<!-- AJAX-ZOOM extension to load AJAX-ZOOM into maximized fancybox, requires jquery.fancybox-1.3.4.css and jquery.fancybox-1.3.4.js, optional -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.openAjaxZoomInFancyBox.js"></script>

<!-- Colorbox plugin, only needed if ajaxZoomOpenMode below is set to "colorbox", optional -->
<link rel="stylesheet" href="../axZm/plugins/demo/colorbox/example1/colorbox.css" media="screen" type="text/css">
<script type="text/javascript" src="../axZm/plugins/demo/colorbox/jquery.colorbox-min.js"></script>

						

HTML makup in body


<!-- Only img tag is required, data-group for grouping images into gallery, data-img is the source of the original high resolution image and data-descr is the optional description -->

<img class="azHoverThumb" data-group="cars1" data-descr="Jaguar MK II 340" data-img="/pic/zoom/trasportation/transportation_010.jpg" src="/path/to/preview/image/transportation_010_small.jpg" alt="" />

<img class="azHoverThumb" data-group="cars1" data-descr="Alfa Romeo Bertone Giulia Sprint GT" data-img="/pic/zoom/trasportation/transportation_011.jpg" src="/path/to/preview/image/transportation_011_small.jpg&height=960" alt="" />
						

JavaScript


// Fire azHoverThumb on all images which have class .azHoverThumb
$(".azHoverThumb").azHoverThumb({
	instantWrapClass: "azHoverThumbImgWrap",
	zoomRatio: 1.1,
	parentHeightRatio: "auto"
});
						

$.azHoverThumb - documentation (options)

Option Default Description
zoomRatio 1.5 The degree of the zoom-in effect when a user hovers a thumbnail image with the mouse or touches with the finger on touch devices.
fadeInSpeed 250 The speed of fade-in effect when a thumbnail image appears after preloading.
zoomEsingIn 'swing' Easing animation of the zoom-in effect.
zoomEsingOut 'swing' Easing animation of the zoom-out effect.
zoomInSpeed 250 Duration of the zoom-in effect.
zoomOutSpeed 100 Duration of the zoom-out effect.
parentHeightRatio false If the width of the thumbnail image is responsive, you can set the aspect ratio of the parent container, e.g., 0.75. The proportions of the parent container are then always the same. You can also set the value of this option to "auto".
parentHeightLL 0.75 If image aspect ratio of the image is unknown, e.g., the parentHeightRatio option is set to "auto" and the images "lazy load" plugin is used (initially, the src attribute of the image is empty), the parentHeightLL option temporally applies until the src of the image is set by the "lazy load" script.
maxHeight 1.0 Limit the height of the thumbnail relative to the height of the browser's window. This limit applies when the parentHeightRatio option is set to "auto". The maxHeight is useful if the "thumbnails" image is quite large.
parentWidthRatio false If the height of the thumbnail image is responsive, you can set the aspect ratio of the parent container, e.g., 1.33. The proportions of the parent container are then always the same. You can also set the value of this option to "auto".
overlay true Show semi-transparent overlay while zoom effect runs.
overlayColor '#000' Background color of the overlay.
overlayOpacity 0.4 Opacity of the overlay.
axZmPath 'auto' Path to the "/axZm" folder, which contains the AJAX-ZOOM core files, e.g. "/test/axZm/". Please avoid providing a relative path.
axZmCallBacks {} AJAX-ZOOM has several callbacks, https://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart
fullScreenApi false Try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except for IE < 10 and some mobile browsers. At the time writing this documentation, AJAX-ZOOM does not apply the fullscreen API for mobile browsers even if it is supported. That may change in the future version.
instantWrapClass null Wrap the image tag automatically by a div HTML element with a CSS class specified in this option.
ajaxZoomOpenMode 'fullscreen' This option determines how AJAX-ZOOM opens when the user clicks on a thumbnail, possible values are:
  1. 'fullscreen' - AJAX-ZOOM opens at fullscreen mode, see also the fullScreenApi
  2. 'fancyboxFullscreen' - AJAX-ZOOM opens in the responsive "Fancybox". "Fancybox" is a commonly used lightbox jQuery plugin.
  3. 'fancybox' - AJAX-ZOOM opens in a regular, fixed width and height "Fancybox".
  4. 'colorbox' - AJAX-ZOOM opens in "Colorbox" with fixed width and height. "Colorbox" is another third party modal window plugin.
  5. 'iframe' - Replace the image with AJAX-ZOOM viewer.
exampleFullscreen 'mouseOverExtension' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'fullscreen'.
exampleFancyboxFullscreen 'mouseOverExtension' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'fancyboxFullscreen'.
exampleFancybox 'modal' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'fancybox'.
exampleColorbox 'modal' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'colorbox'.
exampleIframe 'mouseOverExtension' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'iframe'.
iframeLink 'example33_vario.php' If "ajaxZoomOpenMode" option is set to "iframe", the value of this option defines the path to a file that handles the AJAX-ZOOM viewer.
iframeParam 'noSplash=1&stepZoom=1&mNavi=mZoomOut:5,mZoomIn:15' Additionally to the information about the images, the extension appends these parameters and values to the query string, which are passed to the file defined in the iframeLink option.
iframeClose 'Close zoom' Show button to close AJAX-ZOOM viewer if ajaxZoomOpenMode option is set to "iframe". Can be true, false or string. If a string, the value of this option defines the text that is added to the button.
fancyBoxParam {} If "fancybox" is used in ajaxZoomOpenMode option, this object extends the default "Fancybox" plugin options.
colorBoxParam {} If "colorbox" is used in ajaxZoomOpenMode option, this object extends the default "Colorbox" plugin options.
Last updated: 2019-02-28
2 you will find the respective configuration set in /axZm/zoomConfigCustom.inc.php after
elseif ($_GET['example'] == [someValue])
There you can change existing options or copy from /axZm/zoomConfig.inc.php other options to change the values.

Examples, which use the $.azHoverThumb extension

  • example6
  • example6_cms
Load other examples in slider