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

I was trying to find a way to get the latest article posts dynamically on the homepage M2Volt.com. This needed to be client side since it is outside of the CMS we are using for our blog page. I stumbled upon a plugin on the jQuery site, jgfeed, that blew my socks off it was so easy to use and I decided to write this one up.

Check out this jQuery plugin: http://plugins.jquery.com/project/jgfeed

Here is how easy this plugin is to use:

Step 1: Link to the JS

Step 2: Configure a snippet of JS

jQuery.jGFeed('http://www.m2volt.com/blog/feed/',
function(feeds){
  // Check for errors
  if(!feeds){
    // there was an error
    return false;
  }
  // do whatever you want with feeds here
  for(var i=0; i"
    + entry.title + "
" + entry.publishedDate + "
" + entry.contentSnippet + "

");
  }
}, 3);

This will inject 3 entries to the div with id=”injectRssFeed”

Step 3: Uhh, thats it.

Check out the Latest Blog Posts section: m2volt.com

Mad props to the guys who developed this plugin.