I am a jQuery junkie. I love jQuery.
What is jQuery you might say? Well, since I do have a strong small business owner following, I feel I must explain (from Wikipedia):
gMap jQuery Plug-In
"jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 27% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today."
In layman's terms, it is an uber-cool javascript framework that can make your website dazzle in terms of visual functionality. You know I am all about usability, and since Flash isn't a good usability platform, jQuery picks of where Flash left off. We can do so much more with jQuery and make it SEO-friendly (where Flash is NOT). jQuery is lightweight and very fast, and is really very simple to implement.
jQuery also has "plug-ins" that extend the functionality of the base framework. Since it is open source, people develop plug-ins and (usually) allow people (like me) to use them for free. Free is cool.
Thus, I have compiled what I think are the freshest and coolest jQuery plug-ins for 2011 so far:
gMap allows you to embed Google Maps data easily, with a high amount of flexibility. gMap can be customized in many different ways. All you need to do is to pass a JSON object to the gMap() function. You can also add custom geocoding to highlight your location when the map is displayed on your website. Here is a small snippet of code:
$("#map1").gMap({
markers: [{ latitude: 50.083, longitude: 19.917 }]
});
The name is kind of self-explanatory. This cool jQuery plugin allows you to easily display the Facebook wall of any user, page or app with just a tiny bit of code:
$('#live-demo').fbWall({
id:'Websites-That-Work',
showGuestEntries:true,
showComments:true,
max:5,
timeConversion:24
});
You can easily customize the look-and-feel, or leave it as is to make it look just like an embedded Facebook page.
Supersized jQuery Plug-In
For all you photography small business owners, this jQuery plug-in is the "right size" for you! What does it do? It resizes your best photos to fill up the screen as a background for your web page. I really like this plug-in, and can't wait to use it on the next photography-related website I build.
There are so many powerful options, I won't display a code snippet, just go over to the Supersized jQuery Plug-In site and see how it works for yourself.
Imagin8 is an image slider/fader. Big deal. Yes! It is a big deal because it isn't just another image slider (as there are literally hundreds, if not thousands of jQuery image sliders out there). The Imagin8 plugin reads the path of the 1st image and then loads the next numbered image under the same path. Your images will need to be named numerically in sequence, as in: 1.jpg, 2.jpg, etc..., but this is way cool, especially if my clients want to change their images without having to get me involved. It is extremely lightweight, and is called simply like:
HTML:
<div id="one" class="imagin8">
<img src="images/imagin8/your-folder/1.jpg" alt=" " />
</div>
jQuery:
$("div.imagin8").imagin8({ images : 8 });
jQuery.contentEditable jQuery Plug-In
And that's it! There are a few options, such as fadedelay, delay and if you want the images to display in reverse (playbackwards).
jQuery.contentEditable is a light-weight WYSIWYG rich text editor plugin that uses contentEditable support in modern browsers for in-place HTML editing. Basically, you can use it to edit Rich Text Format (RTF) right inside your web-browser over the Internet. The developer, FreshCode, has opened it up to open source development, which to me, is very exciting. There are all kinds of applications that this can be used for. Take a gander at http://www.freshcode.co.za/plugins/jquery.contenteditable/demo.html
Why jQuery?
I prefer jQuery over other highly-interactive visual applications like Flash for the following reasons:
- Open source - jQuery is a light weight open-source standard that works across all browsers. There is no special plug-in required.
- Extensibility - Since it is open source, there are literally tons of free plug-ins readily available and more being developed and released every day.
- Ease-of-use - It is amazingly easy to implement. Really.
- See #1 - I cannot say enough about open source. It is the way of the future, and the word "proprietary" is beginning to have a negative connotation about it, and for good reason.
What is your favorite jQuery plug-in?