Code Monkey home page Code Monkey logo

urlive's Introduction

jQuery URLive

URLive is a jquery plugin that helps you create an preview snippet of a url based on the Open Graph properties of the page, similar to a url preview in a facebook post.

The plugin works with any element that has a url content or value, even on <a> tag with href. It is lightweight and doesn't require any back-end code as data scraping is done asynchronously with AJAX using the Yahoo Query Language (YQL).

jQuery URLive

Demo

You can find the demo at http://markserbol.github.io/urlive/.

Getting Started

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

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

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

You can find the in-depth documentation in the wiki https://github.com/markserbol/urlive/wiki.

License

URLive or 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.

Changelog

  • v1.1.1 (26 Dec 2014)

    • Fixed relative URL path for images
  • v1.1.0 (28 Oct 2014)

    • Added option regexp
    • Added option yqlSelect
    • Added data- attribute to set or override YQL response data
  • v1.0.4 (14 Apr 2014)

    • Fixed reserved keyword error on IE
  • v1.0.3 (23 Mar 2014)

    • Fixed CSS and design orientation
  • v1.0.2 (24 Feb 2014)

    • Added callback function onClick
    • Added handler to preview snippet click event
  • v1.0.1 (25 Jan 2014)

    • Initial release

urlive's People

Contributors

markserbol avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

urlive's Issues

V2 Update

Hi Guys!

I'm currently working on a major update. I'm looking for ways to greatly improve this plugin and keep it maintainable moving forward. And this is the list that I have in mind so far:

  1. Moving from YQL to import.io for data scraping services.
  2. Identify media files url, and build specific UI for each (images, music, video, etc).
  3. A flexible design solution. It won't be dependent on HTML structure so developers can have full control over the design. Maybe applying a small templating library.
  4. Apply automated testing.

If you have any suggestion please comment here. Thanks!

images and relative path

Hello,
First of all thank you for all your work and kudos to you for the latest version which is significantly faster to retrieve the informations.
I'm not sure this is the best place for my problem but it looks like I'm the only one wondering about that..
So, whenever I enter a URL in my textarea and display the results of the fetching I get quite a few 404 because of the images on the page at my url.
When I inspect my urlive container I see that the images path are relative hence the 404s since those pictures dont exist on my server.
Images pulled from og metas work though but I suspect their paths are absolute but if I type www.google.com for example I get text only.

Is there an option I forgot to add to retrieve absolute paths ?

Thank you.

Image choice when url rendered

Hi, first of all, I was amazed that this plugin is really amazing.

But once I noticed that the plugin doesn't come with an option to choose which image should be inserted into the rendered preview.

Because sometime the plugin only grab the logo of the defined website, not the image of article.

The question is, are you going to improve this plugin better?

Or if you're too busy with your job, how could I edit the code so I can rich what I want?

Thank you, you're genius friend!

retrieving special characters

It's working perfectly. But I had a problem with special character like the apostrophe on some sites?

The url live comes out like "ospedale: l&#039Hiv" instead of "ospedale: l'HIV".

Is is possible to modify this?

Improve performance

Hey, I'm far from an expert on jquery and javascript but I did a few test and I found some improvements searching for open graph elements only on the header. I replaced

html = $('

', { html: data });
width:
html = $('
', { html: data.match(/<head[^>]>[\s\S]</head>/gi) });

Feel free to bash me if I'm doing something really stupid here !

Demo is not Working.

i have gone through demo url give in doc but it show

"Loading..."

text nothing else.

Canno embed video from youtube

Hi Mr,

I am the one who has used your code to improve my own personal project, exactly I have spend 3 months with your code, and I have not found any problem. Of course to day may be the nightmare for me because I could not embed video YouTube as usual. so I do not know what what is the main problem while the other URL was worked find with your code.

so, if you have done with this problem, please send me with this email : [email protected]. I do not want to change other library because your library is made me fall in love.

Thanks

the js is dead

im backing to look if working but it seems its not
it was a good js man thanks for everything

Multiple containers for multiple selector/url.

I am just wondering if urlive can support multiple containers. I am trying create wall like facebook , I retrieve my url(message) from database. Urlive will check if there is url detected in a message then if there is a url, urlive will display the image and description.
My problem is the last container will display all the images and descriptions, only one container for all of datas retrieved.
urlive

Urlive is so far the best plugin for url preview.

Apparently this isn't working

I can't even get the demo site working. The jsFiddles don't even work.

I've used this before, and it worked, but not sure if something changed in it or if my browser might be screwed or something. Using Chrome.

marksenpai the urlive report

mark-sama i use your urlive code and the only thing that i can say to that is so fuking awesome!!! but now, there are a trouble about the youtube´s url, the code isnt working but with other url like wikipedia and vimeo and the rest of the internet url is working good, now i have to think there a few changes in the youtube meta and the urlive seem to be not reconigze certian code, i guess but from the other the urlive code are working good i attach one image for prove that
sdasd

i think there is a bug.

Hi..thank you very much for urlive.
Just i don't know whether bug or not.

when i put a link on the textarea , it's okay.
but i deleted the link using "Backspace" and input some text,
there is still being...like that
1

2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.