Best jQuery Other API Plugins & Tutorials with Demo

    GMAP3 : A jQuery plugin to use Google maps

    GMAP3 : A jQuery plugin to use Google maps

    gmap3 is a plugin for jQuery which allows you to use the Google maps API easily. It provides some powerful functions (clustering…) and some simple which avoid you to write lot of repetitive code. However, it allows to use all the Google Maps API.

    jQuery Geolocation and Yahoo’s APIs to build a simple weather webapp

    jQuery Geolocation and Yahoo’s APIs to build a simple weather webapp

    Today we will be using the HTML5 geolocation API to present the user with a personalized weather forecast. Using jQuery, we will issue AJAX request to two of Yahoo’s popular APIs to obtain additional geographical information and a weather forecast.

    Yahoo provides a large collection of useful APIs that are free for developers to use. The requirement is that you register your application with through their developer dashboard. The registration is simple and straightforward, and as a result you obtain an application id (look for it under the title of your application). You are going to need this later in the tutorial, but first let’s see how everything would work together.

    simpleWeather : How to display weather with jQuery

    simpleWeather : How to display weather with jQuery

    A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.In the demo shows how easy it is to display a simple weather widget that is clean and customizable. This is the basic usage showing only the current weather and an image. simpleWeather does not return any html or css classes which lets you do with the data as you please.

    jQuery Facebook Multi-Friend Selector Plugin

    jQuery Facebook Multi-Friend Selector Plugin

    I created a new jQuery pluging that works with the new Facebook javascript SDK to present a users list of friends and allows them to select the friends they would like to do X with. That “X” is up to you; once the user has selected their friends, you call a function on the plugin that returns an array of the friends Facebook Ids. A few key points:

    • client-side, no server-side PHP blah blah blah dependencies like some of the other alternative friends selectors
    • depends on jQuery and the new Facebook Javascript API
    • only requires several lines of code to drop-in

    jQuery Autofill City & State from Zip Code with Ziptastic

    jQuery Autofill City & State from Zip Code with Ziptastic

    Most address fields on web forms ask for city, state, and zip code (or city and post code, outside of the US). But as us nerds often lament, city and state are redundant with zip code. Or at least they can be inferred from a correctly entered zip code. That’s the kind of thing computers are good at. What we need is a proper API to cough up that information for us on demand

    We’re going to watch the zip input for keystrokes. Should the final value after a keystroke be a valid zipcode, we’ll attempt to get the city and state through Ziptastic and reveal the other fields.

    jQuery Flickr Photobar Gallery with Demo

    jQuery Flickr Photobar Gallery with Demo

    After we got a lot of great feedback for our image galleries we decided to follow some of the suggestions and create a gallery that uses the Flickr API. The aim was to build a bottom photobar that one can easily integrate into a website. It is hidden initially and slides up when the handle is clicked. First, the photo sets are shown and when one of them is chosen, all its images can be viewed as thumbnails. When a thumbnail is clicked, a full image view appears as an overlay.

    Webshims Lib : jQuery Polyfill loading Library with Demo

    Webshims Lib : jQuery Polyfill loading Library with Demo

    HTML5 forms/Web Forms 2.0 widgets and constraint validation API.Webshims Lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features, so that developers can write modern, interoperable and robust code in all browsers. It is built on top of jQuery and Modernizr.

    Timeline : jQuery Storytelling Tool with Demo

    Timeline : jQuery Storytelling Tool with Demo

    Timeline is a JavaScript-powered tool for creating interactive storytelling timelines where a timeline works in parallel with a content slider.Users can choose to browse the contents either by clicking the items in the timeline or by navigating through the content slider where both stays synchronized all the time.

    Timeline is great for pulling in media from different sources. Just throw in a link from Twitter, YouTube, Flickr, Vimeo, Google Maps or SoundCloud and Timeline will format it to fit perfectly. More media types will be supported in the future.

    Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.

    tQuery : Extentions for three.js + jQuery with Demo

    tQuery : Extentions for three.js + jQuery with Demo

    tQuery is a thin library on top of three.js It is an extension system for people to write plugins. To help them share their code and build on top of each other. It mimics jquery api, well know for its usuability. tQuery aims for “it is should not be harder than playing with lego bricks.”

    three.js got various rendering backends, importers for most 3D models format. It efficiently abstracts webgl complexity and provides a wide varieties of 3D objects. It got numberous examples 120+.

    tQuery aims to reproduce the success of jQuery plugin ecosytem by mimicing its API. Thus people who know jQuery will learn tQuery in no time. Thru three.js, they will be be able to reach webgl technology faster than before. Hopefully they will get exited and develop extensions for three.js 🙂

    Making a jQuery Page Flip Magazine with turn.js

    Making a jQuery Page Flip Magazine with turn.js

    In this tutorial we are going to use PHP and the turn.js plugin, an implementation of the page flip effect with pure CSS3 and jQuery, to build a pretty magazine. We will fetch the most popular images from Instagram every hour, and use them as pages.