The power and the easiness of Greasemonkey is undoubted. Now with the help of jQuery, it’s even much easier. If you haven’t got any experience before with Greasemonkey, you could check on my first post.
Start writing Javascript for GreaseMonkey

The purpose of the script

There’s time when you visit some beautiful gallery website or a forum full of pictures, unfortunately they don’t use lightbox, or maybe they link to an image host service. That’s mean you have to 1. open the image then go back to the page to view the next image, 2. open it in another tab, view it, close the tab to go back. Well, I don’t like both methods. So what this script will do is: when you press CTRL + ALT and click on a link, a small view port open up allow you to quick preview this link/image.
You could check on the example page, it integrate the script inside already so you don’t need to add the script:Link Preview Test
And here is the complete version of the script:Link Preview Script

Using jQuery for your script

There are two ways to integrate jQuery into your script.
First, you could link to the JS file in Google Code by inserting this code on top of you script:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

So everytime the script start, it will load the script from Google Code. However that means the speed will be slow down as it had to connect to another server. That’s why we have the second methods. Copy and paste the whole jQuery Core into our script. It could increase the file size of our script but it could be load faster as all the script will be load from the local computer. That’s also how I normally use.
The code should look like this:

//jQuery Core
(function(){var l=this,g,x=l.jQuery,o=l.$,n=l.jQuery=l.$...
(function(){var N=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\...

Assign events for the links

We now could use the power of jQuery for our scripts. Let’s assign some events for the DOM. We will put all these event inside a $(window).load, so the script will only be assign when everything completely loaded.

$(window).load(function()
{
}

Whenever users click on a link we need to check if users pressed CTRL+ALT+Left Mouse or not. If not, just ignore it. If they do, create a new view port for the page.

	$("a").click(function(event){
		if(event.ctrlKey && event.altKey && event.button ==0){
			event.preventDefault();
			GMLinkClick(event);
		}
	});

What is GMLinkClick, this function is to create the new viewport for the link, I will talk about it later in the article. Now the viewport open, we also want to close it whenever user click on the close button or if they press ESCAPE. You will need to assign 2 events one when user click on close button and one when user press ESCAPE. To handle when user pressed ESCAPE, we assign a function for $(document).keyup.

	$(document).keyup(function(event){
		if(event.keyCode==27)
		{
			event.preventDefault();
			$("#QuickView").hide(200, function(){$("#QuickView").remove();});
		};
	});

27 is the keyCode for ESCAPE. After we hide the View-port, we will remove it from the HTML, that’s why we need the callback function.
What about the close button? The button is only created when user clicks on the link so we can’t assign it now. We can only assign it when the button created already.
That’s pretty every events we need. Now let move on to create the view-port.

Create the view-port

The view-port is quite simple. We create a Div with a close button and an iFrame in it. You could use jQuery.load to load the content but I myself prefer this way as it could load up all the scripts for the preview page.
To get the link out of the event, we use this commands:

	var link = event.target.href;
	if(!link){
		link = $(event.target).parent().get(0).href;
	}

Why do we need an if here? Well if we have this structure:

Whenever you click in the object, it will return the image not the link. So the if in case we can’t find the link, it should be in the parent object. Ah, and get(0) mean it will return a DOM object not an jQuery Object, that’s why we could use .href.

We could use jQuery to create the view-port as simple as:

$("body").append("
");

However we also want position it to the position of the mouse and style it up a bit.

	$("#QuickView").css("top", 	event.pageY + "px");
	$("#QuickView").css("left",	event.pageX + "px" );
	$("#QuickView").css("width",	"600px" );
	$("#QuickView").css("height",	"600px" );
	$("#QuickView").css("position",	"absolute" );
	$("#QuickView").css("background",	"white" );
	$("#QuickView").css("border",	"1px solid black" );
	$("#QuickView").css("padding",	"2px" );
	$("#QuickView").css("z-index",	"9999" );

The z-index to make sure it will be on top of every other element. We set the size, position, border, padding… for the Div. Now let insert a close button and a iFrame for it. Than show up the view-port. Last but not least, remember to assign the event handler for the close button.

	$("#QuickView").append("
Close View

");
	$("#QuickView").append("");
	$("#QuickView").show(200);
	$("#closequickview").click(function(event){
			event.preventDefault();
			$("#QuickView").hide(200, function(){$("#QuickView").remove();});
	});

That’s is, we’ve done the link/image preview with GreaseMoney. Test it out.