Hi,
Apple has a pretty cool feature when hovering over a large image here: http://www.apple.com/aperture/what-is.html It zooms out a small magnifier glass icon which moves with the cursor while over a zoomable image.
How can I do that, preferably with JQuery?
Can anyone help me please?
THX
You could just use CSS like so:
cursor: url(pix/cursor_ppk.gif), auto.
Setup an event handler in jQuery for mouseenter() and mouseleave().
During mouseenter(), show the zoom icon and hide it when mouseleave() fires. You should implement these two states with CSS classes. The zoom icon should be absolutely positioned and its positioning container should be the the body of the web page.
Then, implement the mousemove() event over the image. Inside this function, set the absolute position of the zoom icon so it's always a little up and over from the current mouse position.
Sample Event Bindings
$('.someImage').bind('mouseenter', function () {
$('#zoomIcon').addClass('over');
}).bind('mouseleave', function () {
$('#zoomIcon').removeClass('over');
}).bind('mousemove', function (e) {
$('#zoomIcon').css('top', e.clientY-40).css('left', e.clientX);
});
This gets you the zoom icon behavior. The click event behavior is just a couple more lines. The following code shows a hand-made zoom feature that makes use of the new css3 rules. This code is built for webkit, but you can easily add the other browser specific rules to get good cross browser support.
The zoom feature examines the position of the mouse click and converts that position into one of four quadrants. You could split the image into more quadrants if you wanted to. Then, once the quadrant is known, you set the absolute position and change the height/width of the image. The css3 transition property slows down the height/width change so you get a nice zoom feature.
Sample Zoom Behavior
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample zoom</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<style>
#zoomContainer,
#zoomContainer img {
height:300px;
width:400px;
}
#zoomContainer img {
-transition-property: height,width;
-webkit-transition-duration: 3s;
position:absolute;
}
#zoomContainer {
background:#F00;
overflow:hidden;
position:relative;
border:1px solid #000;
}
#zoomContainer.over {
cursor:pointer;
}
#zoomContainer img.zoom {
width:962px;
height:517px;
}
</style>
<script type="text/javascript">
/* my custom jQuery extension */
(function ($) {
$.fn.setPositionByQuadrant = function (quadrant) {
switch (quadrant) {
case 1:
this.removeAttr('style').css('top', 0).css('left', 0);
break;
case 2:
this.removeAttr('style').css('top', 0).css('right', 0);
break;
case 3:
this.removeAttr('style').css('bottom', 0).css('left', 0);
break;
case 4:
this.removeAttr('style').css('bottom', 0).css('right', 0);
break;
}
return this;
};
})(jQuery);
/* page specific javascript */
$(function () {
$('#zoomContainer').mouseenter(function () {
$(this).addClass('over');
}).mouseleave(function () {
$(this).removeClass('over');
}).mousemove(function () {
// change position of zoom icon here
}).click(function (e) {
var quadrant = convertClickPositionToQuadrant(e, $(this));
var img = $(this).find('img').toggleClass('zoom').setPositionByQuadrant(quadrant);
});
});
/* conversion function */
function convertClickPositionToQuadrant(e,target) {
var x = e.offsetX;
var y = e.offsetY;
var xMiddle = target.width() / 2;
var yMiddle = target.height() / 2;
if (x > xMiddle) {
if (y > yMiddle)
return 4;
else
return 2;
} else {
if (y > yMiddle)
return 3;
else
return 1;
}
}
</script>
</head>
<body>
<h2>Sample Zoom</h2>
<div id="zoomContainer">
<img src="http://dots.physics.orst.edu/graphics/image_maps/usa_map.gif" alt="" />
</div>
</body>
</html>