jQuery Plugin For URL Live Preview - urlive

urlive is a jQuery plugin for creating a live preview of a URL that displays a snippet preview (title, description and image) of any URL base on its Open Graph properties and other details. Works on any html element with an URL within its container.

Basic Usage:

1. Include the latest version of jQuery javascript library in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include jQuery urlive plugin's script and stylesheet files in the page, after jQuery library.

<link href="jquery.urlive.css" rel="stylesheet" type="text/css">
<script src="jquery.urlive.js"></script>

3. Create a link with an unique ID that will display a live preview when hover over it.

<a id="demo" href="https://www.jqueryscript.net">Free jQuery Plugins</a>

4. Create a container for the live preview.

<div class="urlive-container">
</div>

5. Initialize the plugin and we're done.

$('#demo').urlive().hover(function(){
    $(this).urlive('open');
},function(){
    $(this).urlive('close');
});

6. Available options.

// element to contain the preview snippet
container: '.urlive-container',

// attribute specifies where to display or open the linked resource on click
target: '_blank',

// determine the size of the image. large, small or auto
imageSize: 'auto',

// renders the snippet preview.
render: true,

// set true will disable the anchor tag default click behavior.
disableClick: false,

// set a regexp pattern to be used in retrieving URL in the element. 
regexp: /((https?:\/\/)?[\w-@]+(\.[a-z]+)+\.?(:\d+)?(\/\S*)?)/i,

// specify the data scraping select location for YQL query. 
yqlSelect: '*',

// callbacks
callbacks: {
  onStart: function() {},
  onSuccess: function() {},
  onFail: function() {},
  noData: function() {},
  onLoadEnd: function() {},
  imgError: function() {},
  onClick: function() {}
}

Change logs:

2014-12-26

• Fixed relative URL path for images

2014-10-31

• Fix error thrown before callback execution

v1.1.0 (2014-10-28)

• Added option regexp
• Added option yqlSelect
• Added data- attribute to set or override YQL response data

v1.0.3 (2014-04-14)

• Fixed reserved keyword error on IE

v1.0.3 (2014-03-25)

• Fix CSS and design orientation

v1.0.2 (2014-02-24)

• Add callback function onClick, add a handler to preview snippet click event

---

This awesome jQuery plugin is developed by markserbol. For more Advanced Usages, please check the demo page or visit the official website.