example6.phpHOMEExamples overviewDownloadAsk a question
example7.php

About

Suppose you have some sort of two or more column responsive layout where main content width is responsive too. This is a typical case for modern CMS themes like WordPress. The layout here is exemplary - do it better :-)

Anyway, now you want to place high resolution images between text. AJAX-ZOOM is a perfect tool to do that.

You can place an unlimited number of images with a nice adjustable and styleable hover effect, then on click show real high resolution images in a various ways - at fullscreen mode, in responsive fancybox, simple static lightbox or simply replace the image with AJAX-ZOOM progressive zoom player. With the data-group attribute images can be grouped to build a gallery which is preserved in AJAX-ZOOM player.

Compatibility

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

Try various AJAX-ZOOM 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

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 high resolution image in AJAX-ZOOM player. You can switch the way AJAX-ZOOM is opened by changing the "open mods" radio boxes. In your implementation you would simply statically set them over $.azHoverThumb extension "ajaxZoomOpenMode" option. (Texts are taken from Wikipedia, we want to pretend 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! -->
<script type="text/javascript" src="../axZm/plugins/jquery-1.8.3.min.js"></script>

<!-- AJAX-ZOOM core, needed! -->
<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)

OptionDefaultDescription
zoomRatio 1.5 Degree of zoom effect
fadeInSpeed 250 Speed of fade in when image first shows
zoomEsingIn 'swing' Easing of zoom effect
zoomEsingOut 'swing' Easing of zoom effect
zoomInSpeed 250 Speed of zoom effect
zoomOutSpeed 100 Speed of zoom effect
parentHeightRatio null If width is responsive you can set the aspect ratio of the height
maxHeight 1.0 Also set / limit height of the image depending on window hight. Applied if "parentHeightRatio" is set to "auto"
parentWidthRatio null If height is responsive you can set the aspect ratio of the width; parentWidthRatio can be also set to "auto"
overlay true show overlay on zoom effect
overlayColor '#000' color of the overlay
overlayOpacity 0.4 opacity of the overlay
axZmPath 'auto' Path to /axZm directory, e.g. /test/axZm/
axZmCallBacks {} AJAX-ZOOM has several callbacks, http://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 IE < 10 and mobile
instantWrapClass null Wrap image tag instanly with a div of the specified class of this option
ajaxZoomOpenMode 'fullscreen' Determines how AJAX-ZOOM is opened when the user clicks on the image thumbs, possible values:
  • 'fullscreen' - AJAX-ZOOM opens at fullscreen mode, see also "fullScreenApi" option
  • 'fancyboxFullscreen' - AJAX-ZOOM opens in the responsive Fancybox. Fancybox is a commonly used lightbox jQuery plugin
  • 'fancybox' - AJAX-ZOOM opens in regular fixed width and height Fancybox
  • 'colorbox' - AJAX-ZOOM opens in Colorbox with fixed width and height. Colorbox is an other popular lightbox plugin
  • 'iframe' - Replace the image with AJAX-ZOOM player
exampleFullscreen 'mouseOverExtension' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fullscreen'
exampleFancyboxFullscreen 'mouseOverExtension' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fancyboxFullscreen'
exampleFancybox 'modal' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fancybox'
exampleColorbox 'modal' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'colorbox'
exampleIframe 'mouseOverExtension' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'iframe'
iframeLink 'example33_vario.php' If "ajaxZoomOpenMode" option is set to "iframe", the path for the iframe document
iframeParam 'noSplash=1&stepZoom=1&mNavi=mZoomOut:5,mZoomIn:15' Additional query string parameter passed to iframeLink
iframeClose 'Close zoom' Show button to close AJAX-ZOOM player if "ajaxZoomOpenMode" option is set to "iframe". Can be true, false or string. If string the text will be added to the button html.
fancyBoxParam {} If fancybox is used in "ajaxZoomOpenMode" option, Fancybox options
colorBoxParam {} If colorbox is used in "ajaxZoomOpenMode" option, Colorbox options
Last updated: 2015-08-09
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.