jQuery Basics Part V

Asif Ahmed

Today we will be looking at Video 11 and 12 of the basic jQuery series. Video 11 practically creates a limited version of Hoverzoom which is a great extension for Chrome (especially for Reddit and Facebook). Whenever we hover over an image, we want to display a bigger version of the image closeby. This is useful if the image is small, and then you can hover over it to see the details of a picture instead of actually clicking on it. To create this hoverzoom capability we need to use the “hover” function like we learned in the previous post and also use the “mousemove” function.

var offsetX = 20;
var offsetY = 10;

$('a').hover(function(e) {
var href = $(this).attr('href');
$('</pre>
<img id="largeImage" src="' + href + '" alt="" />
<pre>')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function() {
$('#largeImage').remove();
});

$('a').mousemove(function(e) {
$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
});

Basically whenever we hover over an anchor tag, we want to get the href attribute of that anchor tag. With this href attribute we can construct the proper HTML for displaying the enlarged image and then position it correctly with CSS. Then we can append this HTML to the “body”. If we hover off, we can remove this enlarged image. Also if we move the mouse over the image, we want the enlarged image to move as well. We can view an example of this hoverzoom capability here. Note that if you have the hoverzoom extension already enabled you will have two “zoomed” images pop up. The image we created has a gray border.

Video 12 also builds on this pop up functionality whenever you over a link. This time when you hover over a simple link, you will get a formatted popup with text and an image. The code is very similar to the code in Video 11. To see what the finished product from following Video 12 would look like, go here.

We only have one more day in our jQuery series and we will be looking at Videos 13-15 tomorrow. These are long ones however. Afterward we will probably we looking at some intro PHP classes. Also I just bought a domain name and hosting for it. I will be playing around with that this week as well. I’ll unveil the site name tomorrow.