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.
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.
Provided that other scripts and CSS on your page support old IE, you can use this setup even for IE 7 compatibility.
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...)
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.
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.
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:
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.
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.
<!-- 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>
<!-- 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="" />
// Fire azHoverThumb on all images which have class .azHoverThumb
$(".azHoverThumb").azHoverThumb({
instantWrapClass: "azHoverThumbImgWrap",
zoomRatio: 1.1,
parentHeightRatio: "auto"
});
elseif ($_GET['example'] == [someValue])