image previewer

Here is a cool jQuery effect which lets you preview an image when you hover over its thumbnail. It pretty much a tooltip that follows your mouse around while having an image rather than text. The image previewer will also adjust itself depending on how large the image is in relation to the x and y coordinates of your mouse.

Regular demo
Grid demo

Heres how to implement:

1. Link your JS



Sources:

jQuery
img_prev.js

2: Set up your HTML.

Start by adding a class to your image called “imgPrev”. You then want to add the src attribute, the src will be the URL to the thumbnail. Finally add your rel attribute, this will be the URL to the full sized image you want to preview.

 

3: Add your CSS

You only need to add css to the imgPrev id, this id is appended to the HTML body via the JS. This is the container that holds the images.

#imgPrev {
	position: absolute;
	background: url('img/trans_bg.png');
	padding: 5px;
	display: none;
}

Background image source:

trans_bg.png

Regular demo
Grid demo

© 2010 M2Volt all rights reseved

back to top