Shiny Blog

Hi fellow reader of the Shiny Blog, today I am tired of seeing this blog posts schema : “ YOU WOULD LITERALY DIE FOR”.  We have an expression for this in France : “On dit qu’il y a à boire et à manger là dedans”. This approximately means that you will actually have to filter the good from the junk yourself.

So, today I’m bringing you only high quality jQuery plugins that, and I know it, will help you to enchance your user’s experience.

I might not be aware of all the great jquery plugins out there, so as usual, if you feel that I ommited your favorite plugin please, Oh please, share your knowledge with us by leaving a comment!

Note: If you feel that these plugins look and feel seems related to Mac OS X then, it’s not a coincidence.

iconDock

by Isaac Roca

iconDock is a jQuery JavaScript library plugin that allows you to create a menu on your web like the Mac OS X operating system dock effect one.

It is based on the Google X menu, an approach that Google did to create this effect on the web.

Ressources :

• iconDock jQuery Plugin Wiki
• Examples

Simple Controls Gallery

by Dynamic Drive

Want to display images as an automatic slideshow that can also be explicitly played or paused by the user?

Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery. Lets take a look at the script’s set of features:

• Displays images either as an automatic or manual slideshow, with the image faded into view over the previous. A Navigational Panel slides up when the mouse rolls over the gallery to play, pause, or step through to a specific image within the gallery.
• In automatic mode, set the number of cycles before the script stops rotating.
• Each slide consists of an image that can be hyperlinked.
• Each slide can have a description associated with it. When defined, a Description Panel slides down from the top of the gallery showing the description.
• The gallery supports persistence of the last viewed image via session cookies, so going away then coming back to the gallery calls up the last viewed image within a browser session.

The images within the Gallery should all be the same size for best results.

Ressources :

• Simple Controls Gallery Download & Demos

jGrowl

by Stan Lemon

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

Ressources :

• jGrowl info & demos

Flip!

by Luca Manno (@roncioso)

Flip is a plugin for jquery that will flip your elements in four directions.

Browser Compatibilty

• Firefox 2+ (Linux, Windows, Mac OSX)
• Internet Explorer 6+ (IE8 beta2 included, yeah)
• Safari (Mac OSX, Windows)
• Google Chrome (Windows)
• Opera (Linux, Windows)

Ressources :

• Flip jQuery plugin info & demo

seekAttention

by James Padolsey (@jamespadolsey)

The “seekAttention” plugin gracefully get’s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

The definable area (to be called “container” from this point forward) can be the entire page or any element which surrounds the target element and the colour which overlays the container can also be defined by you.

Ressources :

• seekAttention jQuery plugin infos & demos
• James blog

FancyBox

by Janis Skarnelis

Simple jQuery plugin for fancy image zooming

Features:

• Automatically scales large images to fit in window
• Adds a nice drop shadow under the zoomed item
• Groups related items and adds navigation through them (uses preloading)
• Can display images, inline and iframed content
• Customizable through settings and CSS

Ressources :

• FancyBox infos & demos

Select-to-slider

by Scott Jehl

The purpose of this plugin is to allow for the jQuery UI Slider plugin to be generated using progressive enhancement. The plugin scrapes the data from a select element and generates a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. This also allows the slider to work with our without javascript since the select element can be used if the slider is unavailable.

Ressources :

• Select-to-slider jQuery plugin infos & demos