Zooming in is like seeing the contents of your webpage through a magnifying glass. Only that you do not hold the magnifying glass in your hands.
Instead it automatically comes into action as you hover the mouse over the contents.
You can think of many uses of a zoom-in tool, or zoomer as popularly known. For example, if you have a webpage that has a picture gallery with descriptions, you may possibly consider using a zoomer.
Other than being an attractive addition to mesmerize viewers, a zoomer’s advantage lies in the fact that you can accommodate more amount of contents in a webpage than what is normally possible.
This video tutorial seeks to explain Chris Coiyer’s Anything Zoomer. The topic is also explained by Jennifer Farley at SitePoint.
This is another example of creating zoom-in on mouseover – in this case, for a product catalog.
Let us take a look at the following section, titled ‘A Brief History of Cape Town, South Africa’. As you hover your mouse on the small texts at left or the images to the right, notice how the cursor changes to crosshair while the portion within a smallish rectangle gets magnified (if you have problem seeing the following example, try this page to see it in action).
The Key Point
Both the text and the image are created in 2 sizes, small and large. The small sizes are displayed in normal course that change to large sizes on mouseover through a rectangular zoom-in ‘magnifier’.
Making text small is possible through CSS alteration, but for images you need to use a small and a large size of the same image.
Look at the CSS and the HTML codes closely to follow the underlying concept.
The Procedure
Chris’ method involves using 3 sets of javascripts. One of these is the jQuery library and another is the zoomer jQuery plugin. The third relates to calling the scripts into action.
You can download the free AnythingZoomer v1.0 from Chris’ site, unzip it and put to use the different files therein.
The zoomer is put in action following 5 parts like 5 concentric circles moving from outer to inner one. The wrap is like the outer circle, going around everything. All other actions come inside it. The small area, viewable by default, is where you hover mouse to see corresponding large contents through an overlay box. The mover is the wrap-around for the large area and the overlay.
If you are using more than one zoom-in sections – the above example has 4 – Chris suggests using separate wraps for each of them. If you see the CSS code of the above example you may understand how it can be done.
The CSS Code
Here are the minimal styles used for the example above. Some internal styles have also been used as can be seen in the HTML code.
/*
GENERAL
*/
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 14px Georgia, Serif; color: #004; }
/*
FOR THE MOVER
*/
#wrap1, #wrap3 { width: 405px; position: relative; }
#wrap2, #wrap4 { width: 225px; position: relative; float:right; }
#small1, #small3 { width: 100%; position: relative; text-align:justify; }
#small2, #small4 { width: 100%; position: relative; margin:0 auto; }
#large1, #large3 { background: white; position: relative; width: 490px; text-align:justify; }
#large2, #large4 { background: white; position: relative; width: 320px; text-align:justify; }
#mover1, #mover2, #mover3, #mover4 { position: absolute; top: 0; left: 0; width: 144px; height: 104px; cursor:crosshair; overflow: hidden; z-index: 100; background: white; display: none; }
#overlay1, #overlay3 { border: 0px; width: 102px; height: 102px; cursor:crosshair; position: absolute; top: 0; left: 0; z-index: 200; }
#overlay2, #overlay4 { border: 0px; width: 102px; height: 102px; cursor:crosshair; position: absolute; top: 0; left: 0; z-index: 200; }
/*
FOR TEXT DEMO
*/
#small1 p { width: 380px; margin:0 0 10px; font-size: 9px; }
#small3 p { width: 380px; margin:0 0 10px; font-size: 9px; }
The HTML Code
The html starts with the call-to-action javascript in the head section for the different zoom-in sections:
<html><head>
<title>A Brief History Of Cape Town Using AnythingZoomer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="zoomer.jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#wrap1").anythingZoomer({
expansionSize: 30,
speedMultiplier: 1.5,
smallArea: "#small1", // Overrides small area ID
largeArea: "#large1", // Overrides large area ID
zoomPort: "#overlay1", // Overrides zoom overlay area ID
mover: "#mover1" // Overrides mover ID
});
$("#wrap3").anythingZoomer({
expansionSize: 30,
speedMultiplier: 1.5,
smallArea: "#small3", // Overrides small area ID
largeArea: "#large3", // Overrides large area ID
zoomPort: "#overlay3", // Overrides zoom overlay area ID
mover: "#mover3" // Overrides mover ID
});
$("#wrap2").anythingZoomer({
expansionSize: 30,
speedMultiplier: 2.2,
smallArea: "#small2", // Overrides small area ID
largeArea: "#large2", // Overrides large area ID
zoomPort: "#overlay2", // Overrides zoom overlay area ID
mover: "#mover2" // Overrides mover ID
});
$("#wrap4").anythingZoomer({
expansionSize: 30,
speedMultiplier: 2.2,
smallArea: "#small4", // Overrides small area ID
largeArea: "#large4", // Overrides large area ID
zoomPort: "#overlay4", // Overrides zoom overlay area ID
mover: "#mover4" // Overrides mover ID
});
});
</script>
</head>
<body>
<table cellpadding=5 cellspacing=3 border=0 style="border:1px dotted #006; padding:10px; width:650px;">
<tr><td width=630 colspan=2 valign=top align=center>
<h2 style="margin:0 0 10px; font: bold 24px Calibri, Helvetica, Sans-Serif; letter-spacing: 1px; color: #006;">
A Brief History of Cape Town, South Africa</h2>
</td></tr>
<tr>
<!-- [1] Top Left section -->
<td valign=middle width=405>
<div id="wrap1">
<div id="small1">
<p><strong><u>Cape of Good Hope</u></strong></p>
<p>The Portuguese were the first to challenge this long held view through the epic voyage of Bartolomeu (1487-88) which was to see this peninsula named Cape of Good Hope – for the promise its discovery for establishing a maritime trade route between Europe and the commercial centers of the East.</p>
<p>As the years passed and trade grew, this unmistakable landmark signaled the halfway point on any journey between East and West. An anchorage where fresh water could be taken on and food obtained by hunting or by bartering with local Khoi herders.</p>
</div>
<div id="mover1">
<div id="overlay1"></div>
<div id="large1">
<strong><u>Cape of Good Hope</u></strong>
<br /><br />
The Portuguese were the first to challenge this long held view through the epic voyage of Bartolomeu (1487-88) which was to see this peninsula named Cape of Good Hope – for the promise its discovery for establishing a maritime trade route between Europe and the commercial centers of the East.
<br /><br />
As the years passed and trade grew, this unmistakable landmark signaled the halfway point on any journey between East and West. An anchorage where fresh water could be taken on and food obtained by hunting or by bartering with local Khoi herders.
</div>
</div>
</div>
</td>
<!-- [2] Top Right section -->
<td width=225>
<div id="wrap2">
<div id="small2">
<img src="cape-of-good-hope-small.jpg" alt="Cape of Good Hope - small" />
</div>
<div id="mover2">
<div id="overlay2"></div>
<div id="large2">
<img src="cape-of-good-hope-big.jpg" alt="Cape of Good Hope - big" />
</div>
</div>
</div>
</td>
</tr>
<tr><td height=10> </td></tr>
<tr>
<!-- [3] Bottom Left section -->
<td valign=middle width=405>
<div id="wrap3">
<div id="small3">
<p><strong><u>Clock Tower, Cape Town</u></strong></p>
<p>Built in 1882, the Dock Clock Tower and Tide Gauge House has been an icon on the docks for more than a century. This much-loved National Monument was used as the Port Captain’s center of operations until 1904, when his offices moved across the cut to the Pierhead.</p>
<p>Beneath the Clock Tower is a well-like shaft, which is linked to the sea by a tide-gauge mechanism. This indicates the exact state of the tide to vessels entering the docks. The second floor of the building houses the mirror room. Lined wall to wall with mirrors, this room allowed the Port Captain a 360-degree view of all the activities in the docks.</p>
</div>
<div id="mover3">
<div id="overlay3"></div>
<div id="large3">
<strong><u>Clock Tower, Cape Town</u></strong>
<br /><br />
Built in 1882, the Dock Clock Tower and Tide Gauge House has been an icon on the docks for more than a century. This much-loved National Monument was used as the Port Captain’s center of operations until 1904, when his offices moved across the cut to the Pierhead.
<br /><br />
Beneath the Clock Tower is a well-like shaft, which is linked to the sea by a tide-gauge mechanism. This indicates the exact state of the tide to vessels entering the docks. The second floor of the building houses the mirror room. Lined wall to wall with mirrors, this room allowed the Port Captain a 360-degree view of all the activities in the docks.
</div>
</div>
</div>
</td>
<!-- [4] Bottom Right section -->
<td width=225>
<div id="wrap4">
<div id="small4">
<img src="clock-tower-small.jpg" alt="Clock Tower small" />
</div>
<div id="mover4">
<div id="overlay4"></div>
<div id="large4">
<img src="clock-tower-big.jpg" alt="Clock Tower big" />
</div>
</div>
</div>
</td>
</tr></table>
</body>
</html> This article of August 4th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
Hi,
I use another kind of photo zoom in on my blogger, which I think is FancyZoom, it’s great for photo galley present, but I’ve seen this kind of similar zoom in function being used for videos, I wonder if you can tell me how to do it.
And is it possible to use FancyZoom and zoom-in on mouseover at the same time? How?
PS I want the code which can be applied in blogger!!
thanks
Kay,
Fancy Zoom comes in the next article. I’ll first cover it with simple demo, and in a future post I’ll attempt using it for picture gallery.
As for blogger, as far as I understand, unless it is self-hosted or you have your own server space, you cannot locate the lengthy JavaScript to be referred to for creating the zoom-in effects.
Nice plugin to zoom hd images without flash (works on iPad…) – http://www.ajax-zoom.com