About

jLinkPreview is a plug-in for jQuery Library which simply allows you to see link's preview image before you visit them by just hovering on it. Link Preview will appear by your cursor when you hover.

Documentation

Mechanics

Plug-in detects the <a> tags in whole page with the given specifications and enables hover Link Preview property for them. Preview images are provided by wimg.ca

Integration

JavaScript Side:

$().jLinkPreview();

HTML Side:

<a href="http://www.sarpdoruktahmaz.com">Sarpdoruk TAHMAZ</a>

If plug-in is called without any parameters, it uses default values, the exact output would be like this for the previous call of the plug-in.

CSS

• The class .jLinkPreview is mandatory to use, you cannot change its name or else plug-in won't work.
• You can change border style, font properties, background color, border-radius and more by editing the the .jLinkPreview class.

Parameters

Parameters are available to use for you to customize jLinkPreview.

$().jLinkPreview({
	  'preload': true,
	  'width': 256,
	  'height': 192,
	  'fade': 300,
	  'background-color': '#333',
	  'elementsHavingId': '',
	  'elementsHavingClass': '',
	  'attribute': 'title'
});

Here are the parameters, default values, available values and descriptions:

Name	Default	Available	Description
preload	true	true false	true: Previews are loaded into the browsers cache at the same time page loads. You don't wait for previews to load. false: Previews will be loaded when link are hovered which sometimes can consume time but this setting is bandwidth-friendly.
width	256	128 to 512	Width of the preview. Recommended values: 128x96, 256x192, 512x384
height	192	96 to 384	Height of the preview. Recommended values: 128x96, 256x192, 512x384
fade	300	1 to X	MilliSecond (ms) value for the preview to fade-in.
background-color	#333	#000 to #FFF	Background color of the preview box.
elementsHavingId	''	anyId	You can specify list of ids for plug-in to consider. You can provide more than one id by sperating them with commas (,) Ex. 'myId,yourId,anotherId' Using this property will disable other previews except elements having classes provided with elementsHavingClass property.
elementsHavingClass	''	anyClass	You can specify list of classes for plug-in to consider. You can provide more than one class by sperating them with commas (,) Ex. 'myclass,yourClass,anotherClass' Using this property will disable other previews except elements having ids provided with elementsHavingId property. For elements having more than one class, it is enough to provide one of those classes to the plug-in.
attribute	title	any <a> attr	Attribute of the <a> element which contains the title for the preview box. Ex. <a href='...' title='My Title'> Ex. <a href='...' rel='My Title'> Links which don't have the provided attribute won't have any title on their previews. HTML5 supports custom tags, you can use them as well. Ex. <a href='...' customTag='My Title'>

Performance

Performance of the plug-in depends on the preview image service provider.
Preview box adjusts itself automatically around the cursor, if it does not fit in browser's window then it appears on the other side of the cursor.

Examples

Examples are based on the following settings:

$().jLinkPreview({
	  'preload': true,
	  'width': 256,
	  'height': 192,
	  'fade': 300,
	  'background-color': '#333',
	  'elementsHavingId': '',
	  'elementsHavingClass': '',
	  'attribute': 'title'
});

<a title="Google" href="google.com">Google</a> // With a title attribute.
Google.com

<a href="youtube.com">Youtube</a> // WithOUT a title attribute.
Youtube.com

<a title="Tweeet!" href="twitter.com">Twitter</a> // With a title attribute.
Twitter.com

Download & Share

More Info

Requirements and dependencies

• Required: jQuery 1.2+

Browser compatibility

• Chrome 4+
• Safari 4+
• Firefox 3.5+, Firefox 3.0
• Opera 10.15+

Internet Explorer support is planned in upcoming versions.

Licensing

Copyright © 2011 Sarpdoruk Tahmaz, released under GPL version 2 license.