Google Maps from Semantic Markup – jMapping jQuery Plugin

jMapping jQuery plugin – for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.

jMapping plugin tries to allow as much graceful degradation as possible by having the HTML be as semantic as possible.

The plugin allows you to customize the map settings, use an object or a function for category options, to update map after Ajax call, on-page pagination, and more.

View basic DEMO

Google maps jquery plugin

Photo Stack Gallery with jQuery, CSS3 & PHP Tutorial

Beautiful Photo Stack Gallery – Tutorial (with source code) on how to create a nice and fresh image gallery using jQuery, PHP & CSS3, with multiple albums support.

The idea is to show the albums as a slider, and when an album is chosen, images are shown in the photo stack view with a slick animation and reflection (reflections only work in Webkit browsers, Google Chrome or Apple Safari).

View DEMO

jQuery, CSS3 image stack gallery

PHP is used for getting the images for each album from albums folders.

Photo Stack Gallery is fully functional in all latest browsers like Firefox and IE, just without some beautiful properties supported only by Chrome and Safari.

Attractive Dual Animated Slider – DualSlider jQuery Plugin

dualSliderjQuery Plugin aims to provide jQuery users with attractive Dual Animated Slider. Easily highlight recent articles, images, or even a video … basically anything you need.

Sliding content can either be static or come out of a database. If it’s out of a database, the paging is built dynamically by the plugin. View DEMO.

DualSlider comes with all standard options like auto sliding -true/false, autoDelay, durationCarousel and more.

dual slider jquery plugin

Animated table sort jQuery Plugin

Animated table sortjQuery plugin allows you to sort a table based on a particular column with a fly effect.

The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches.

Table sort plugin cleans up after itself, and what you’re left with is a legitimate table with each <td> containing the value it visually appears to.

animated table sort

You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Custom Retweet Buttons – jQuery Plugin

Custom Retweet Buttons – a jQuery Plugin that allows you to build your own Custom Retweet Buttons and style it however you like with CSS from the ground up.

Plugin works by using two APIs, it goes to topsy to get the tweet count of the url and then it goes to bit.ly to get a shortened link.

Create custom css styled retweet buttons with jQuery

When creating the templates for the button markup and default retweet text, there are a number of variables available like:

  • count – The total number of tweets the url has.
  • title – The title of the page (can be overridden in the settings)
  • url – The full url of the page (can be overridden in the settings)
  • account – The twitter account to use in the retweetTemplate.
  • shortURL – The bit.ly shortened version of the full url.
  • allTweetsURL – The link to all tweets of the url on topsy.

jQuery MegaMenu Plugin ver.2

jQuery MegaMenu 2 of the popular jQuery MegaMenu Plugin, with quiet a lot of changes in the code base and usability, with a completely revamped JS and CSS code-base.

View DEMO

Customizable jquery menu plugin

Features:

  • Customizable menu show and hide effects, with three available options of slideDown/slideUp, fadeIn/fadeOut and simple.
  • You can choose to activate the menu by click or by mouseover.
  • HoverIntent like feature embedded into the code-base so that we have smooth navigation by default without any external libraries.
  • Automatic alignment of the menu content according to the width of the parent menu container.
  • Variable width of the menu contents.
  • Non obtrusive and easier to understand CSS.

JQuery Tooltip Plugin – ChillTip

ChillTip is a simple and lightweight (0.8Kb gzipped) jQuery Tooltip Plugin that allows you to have a custom designed tooltip for your website.

Via CSS, you can easily change the tooltip background color, border color, tooltips width, and font size.

It can be used for span, img, anchor attributes and anything else that uses the title attribute. ChillTip has been tested and working in IE6+, Firefox, Google Chrome, Opera and Safari.

jquery tooltips plugin

Sliding Checkbox Actions Menu with jQuery

Sliding Checkbox Actions Menu – great tutorial on how to create sliding and draggable actions menu with jQuery, that appears when checkboxes are selected.

A very helpful UI property, especially when creating user interfaces with a long lists of check boxes, since you don’t force the user to scroll up or down to the place where the actions are – they just appear whenever the user needs them.

View DEMO

Sliding action menu with jQuery

Additionally, the user can drag the actions box to the place that is more practical for him, and the box will always follow when the user scrolls the page. It will also show a count of how many check boxes were selected.

This tutorial got inspired by a similar feature in the mobile version of Gmail.