(cache) jQuery URLive by Mark Serbol

Description

jQuery URLive lets you easily create a live preview of any url base on its Open Graph properties and other details, similar to Facebook's post attachment.

This plugin doesn't only work on a <textarea> or <input> it also works on <a> tag and any element with a URL on its content.

It's pretty lightweight as data fetching is done asynchronously via AJAX. It also doesn't require any back-end or PHP file to crawl and get the data as it uses YQL to query and make request on other domains.

Demo

Before we go into further details, bet you'd like to see some demo first.

On `<a>` tag:

On a `<textarea>`:

On elements with a URL text:

Usage

Include jquery.urlive.css inside the head tag of your html document

<link href="jquery.urlive.css" rel="stylesheet" />

Include the latest jQuery library together with jquery.urlive.js on your documents <head>.

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

After files inclusion, call urlive() function on the element with the URL you want to show the preview. And pass the the selector of the element that will contain the preview.

$(selector).urlive({container: '.urlive-container'});

As you've seen on the demo above, you can target any element with a URL to apply the preview. If the element is <textarea> or <input> the plugin will extract the URL from its value. If the element is <a> tag the URL for the preview will come from its href attribute. Other elements like <span> or <div>, the URL should be a text inside the element.

Options

In jQuery Urlive you can pass the following paramater as options to customize the preview behavior and functionality.

`container: '.urlive-container'`	selector, element to contain the preview snippet
`target: '_blank'`	string, attribute specifies where to display or open the linked resource on click. See <a> target attribute.
`imageSize: 'auto'`	string, determine the size of the image. `'auto'` by default checks for the image size first, if the image width is greater than its container then it will show it as large else it will set it to small. Defining `'large'` will set the image to fit its container's width and `'small'` to render the image as a small thumbnail. See styling below
`render: true`	Boolean, renders the snippet preview. If set to `false` nothing will be displayed but you can still retrieve the data via the `onSuccess` callback.
`disableClick: false`	Boolean, set `true` will disable the anchor tag default click behavior.

Callbacks

On the demo above I've used these callbacks as well for the loading notification.

You can define a callback function this way:

$(selector).urlive({
  callbacks: {
    onStart: function() {
      //execute this when urlive AJAX request starts
    }
  }
})

Here is list of callback function you can define and execute on a given instance.

`onStart: function() {}`	Define a callback function that triggers when AJAX data request starts.
`onSuccess: function(data) {}`	Define a callback function that triggers when AJAX successfully received a response with the data. This callback also returns the data using the first parameter `data` which is an Object. And you can access the values by its properties using a simple dot-notation: `onSuccess: function(data) { var image = data.image }` `data` Object properties: `description` `image` `sitename` `title` `type` `url`
`onFail: function() {}`	Define a callback function that triggers when AJAX request fails or fails to connect with YQL server.
`noData: function() {}`	Define a callback function that triggers when AJAX received a response but with an empty data. This so happens when the URL passed has a valid format but is not active/found or no `meta` data defined. See data below
`onLoadEnd: function() {}`	Define a callback function that is triggered once the plugin has finished (including the rendering of the image data).
`imgError: function() {}`	Define a callback function that is triggered when there is an image data but the image URL cannot be found.

Methods

When you call a method you can either use the element that you've applied the urlive preview or the container of the preview snippet.

Close	Calling the `"close"` method will close the existing preview snippet linked to the selector. This hides the preview with some fading effects but does not remove it so you can eventually re-open or show the preview snippet using the `open` method. This method has an optional paramater for the fadeOut `duration`, and this duration value can be either a `string` (`'fast'` or `'slow'`) or a `Number`. Usage: `$(selector).urlive("close", 400);`
Open	Calling the plugin's `"open"` method will open the existing preview snippet, linked to the selector, that has been previously hidden using the `close` method. This method also has an optional paramater for the fadeIn `duration`, and this duration value can be either a `string` (`'fast'` or `'slow'`) or a `Number`. Usage: `$(selector).urlive("open", 400);`
Remove	Calling the plugin's `"remove"` method will remove the existing preview snippet linked to the selector. This method also fades out the preview snippet first before removing it from the DOM, so it also has an optional parameter for the fadeOut `duration`. The duration value can be either a `string` (`'fast'` or `'slow'`) or a `Number` Usage: `$(selector).urlive("remove", 400);`
Disable	Calling the plugin's `"disable"` method will prevent the default on click behavior of the preview snippet. A similar function to the plugin's `disableClick` option that prevents the linked resource of the preview from opening.
Enable	Calling the plugin's `"enable"` method will restore the default on click behavior of the preview snippet. This is intended to revert/remove the previously disabled (using the `"disable"` method or `disableClick` option) default behavior of the preview snippet.

Styling

You can style the preview snippet using the jquery.urlive.css file which contains the default style. The display orientation primarily depends on the image size, you can set the size orientation with the imageSize option. If the image is large the image will be displayed on top and will moslty occupy the width of the preview snippet. If the image is set to small the image will be displayed on the left side before the text details.

There are also data by default not being displayed, these are the site_name and type. If you want to show them as well, you can edit this line and set the display property to block.

.urlive-sitename, .urlive-type {
  display:none;
}

License

jQuery URLive is under MIT License. Use, reproduction, distribution, and modification of this code is subject to the terms and conditions of the MIT license, available at http://www.opensource.org/licenses/MIT.

Your donation will greatly help in developing and updating this free software.