QR Code (generator) plugin for jQuery & JavaScript

I recently came across a 2 dimensional barcode called QR Code. QR code’s are popular in Japan and they are mainly used there to quickly get to some website on their mobiles by simply taking a picture of the QR code. You may read more about QR codes on Wikipedia.

Here is an example of QR code for jQuery HowTo blog:

If you have a QR code reader on your mobile take a picture of it and it will open this website. Cool ha?!

Anyway, there are plenty of free online QR code generator sites, but no JavaScript and jQuery plugins/functions. So, I quickly searched for a free online QR code generator sites with “friendly” URL’s and put together a javascript and jQuery functions that generate QR barcode image’s URL for passed URLs. I used Kaywa & University of Bath services.

Here are javascript and jQuery QR code functions:

// JavaScript function
function qrcode(url, size){
if(typeof(size) == 'undefined') size = 8;
return 'http://qrcode.kaywa.com/img.php?s='+size+'&d='+url;
}
qrcode('http://jquery-howto.blogspot.com');

// jQuery plugin
(function ($) {
$.fn.qrcode = function(url, size) {
if(typeof(size) == 'undefined') size = 8;
return 'http://qrcode.kaywa.com/img.php?s='+size+'&d='+url;
}
})(jQuery);
$().qrcode('http://www.google.com');

The code above utilizes Kaywa’s online QR code generator. You can specify image site as the second argument to the function. The size argument mut be between 1 and 40 and the generated image will 32 x your argument.

Here is javascript and jQuery code for University of Bath barcode generator:

// JavaScript function
function qrcode(url){
return 'http://go.bath.ac.uk/qr/download?DATA='+url;
}
qrcode('http://jquery-howto.blogspot.com');

// jQuery plugin
(function ($) {
$.fn.qrcode = function(url) {
return 'http://go.bath.ac.uk/qr/download?DATA='+url;
}
})(jQuery);
$().qrcode('http://www.google.com');
If you have better solution, just tell me !

1 comments:

Smart.Orange said...

thanks for the cool plugin, but could u plz explain more to run this plugin?. i have tried many times to run it , but it didn't worked with me. i believed we need to create two files [one for the jquery code and the other page to diplay the results. whereby the javascript code will be pasted in.]. actually i am a fresh learner in JQuery.