Tools

Fresh jQuery Tools and Resources for Web Designers

Apr 11, 2010 insic 21 Comments

In this post I will be showcasing to you an array of fresh web tools and resources made on top of jQuery javascript library. List includes detailed tutorials and useful plugins you can use for you next design.

1. Coin Slider

Coin Slider is a jQuery image slider plugin that has unique transition effects.

Features

  • Unique transition effects
  • Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
  • Valid markup
  • Flexible configuration
  • Auto slide
  • Navigation box
  • Lightweight (8kb only)
  • Linking images
  • Free to use under MIT licence
  • Fully customizable using CSS

Direct Link

2. Reel

Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. Great alternative to widely used Flash techniques.

  • Intuitive operation. Supports mouse wheel!
  • No need for a stitched image but it do support them too.
  • Plays fair with your existing CSS.
  • Browser and operating system agnostic. It’s your choice.
  • No browser extensions needed. No Flash, nothing. It’s just an image…
  • Tiny code base. No carbon footprint!

Direct Link

3. jPhotoGrid

jPhotoGrid takes a simple list of images and captions and turns it into a grid of photos that can be explored and zoomed.

Nearly all of the styling for this plugin is done in css. The trick is to layout the grid by floating the list items. The first thing the plugin will then do, is convert these all to absolutely positioned. This is what allows the plugin to zoom in on an individual image and then return it to its place.

Direct Link

4. jbgallery

jbgallery is a feature-rich jQuery plugin for displaying multiple images or multiple galleries in a webpage.

Its function is to show a single big image, multiple images, multiple galleries, slideshows, as a site’s background, in a “dialog” mode or as a common pop-up.
jbgallery has two basic menus: the first one has music player buttons while the other one links directly to single images.

Direct Link

5. Grid Accordion with jQuery

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. One way to look at an accordion is like a collapsed single column of a table.

The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width.

Direct Link

6. Nivo Slider

Nivo Slider is a new jQuery image slider with 9 unique transition effects. It is simple and lightweight. Nivo Slider is built with directional and control navigation. It has been tested on Internet Explorer v7+, Firefox v3+, Google Chrome v4 and Safari v4.

The transition to be used can be a single one or you can set Nivo Slider to randomly apply them.

Features

  • 9 unique transition effects
  • Simple clean & valid markup
  • Loads of settings to tweak
  • Built in directional and control navigation
  • Packed version only weighs 7kb
  • Supports linking images
  • Keyboard Navigation
  • Free to use and abuse under the MIT license

Direct Link

7. jsPlumb

The jsPlumb is a jQuery plugin for visually connecting HTML elements on a web page.

It uses a HTML5 canvas element when supported and Google’s ExplorerCanvas script to support older browsers.

The styles, shapes of the wires and “the position of the connection” can be customized easily.

Direct Link

8. Presentation Cycle

Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

This script generates a progress bar automatically instead of the developer adding some html.
Depending on the settings of the script, it dynamically generates a progress bar adjusted to the number of slides in the Cycle container.

Features

  • Cycle through elements
  • Adjustable animation times
  • Generates a navigation bar that also shows the progress
  • Works in modern browsers

Direct Link

9. TinyTips

TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly.

TinyTips is very easy to install and use. The first thing you need to do is download the latest release, uncompress it into the directory where you want to use it. Once you have done that we can move on to using it.

Direct Link

10. Zurb jQuery Image Uploader

We’ve all seen the basic file upload form for uploading avatars, images, memes, etc. The problem with these is that once you upload your image it’s hidden from you. It’s the same issue with masked passwords, you enter some data and then poof, it’s gone.

The solution is to use a little bit of JavaScript to upload the image as soon as it’s selected and display a thumbnail so we can easily review the form before we submit it.

Head on over to the ZURB code playground to see a complete demo and breakdown of the JavaScript they use to accomplish this.

Direct Link

11. BubbleUp jQuery Plugin

BubbleUp is a jQuery plugin released from a jQuery from aext.net. With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. Imagine the Mac Dock effect, although this plugin’s effect is not awesome like that, it’s light weight for such a similar zooming effect.

Features:

  • Your menu will be scaled in any size via the option.
  • You decide to enable the tooltip or not.
  • The tooltip would be customizable by font, size and color.
  • The speed of the transition (in/out) can be controlled.

12. Advanced jQuery background image slideshow

With the use of transparent PNG’s, some HTML, pretty nifty CSS and jQuery, we can make a beatiful advanced jQuery background image slideshow.

Marco at marcofolio.net create a very detailed tutorial on how to do it.

Direct Link

13. CSS3 jQuery Rich Text Editor

CSS3 jQuery Rich Text Editor a lightweight jQuery plugin use fonts embedded via the new @font-face rule in CSS3.

Direct Link

14. Sponsor Flip Wall

A tutorial on how to create a slick sponsor page with the flipping effect. It uses jQuery, CSS and PHP.

Visit the full tutorial in the link below.

Direct Link

15. Fancy FAQs with jQuery Sliders

Frequently asked questions can be super boring, right? They don’t have to be! David Walsh created a FAQs with a fancy effect using jQuery.

Visit the full tutorial in the link below.

Direct Link

16. YoxView

YoxView is a free image viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin.

YoxView is inspired by Lokesh Dhakar’s Lightbox. Like it, YoxView displays images above the website’s content, as a separate layer.

Direct Link

17. Quicksand

Quicksand aims at providing a similar experience for users on the web. It can reorder and filter items with a nice shuffling animation.

At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. Advanced demonstrations include custom jQuery code to achieve some of the goals, like sorting or making Ajax calls. This code can be copied and used freely, but it’s not part of the plugin.

Direct Link

18. Automatic Image Slider w/ CSS & jQuery

With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash.

With this in mind, Soh Tanaka build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.

Direct Link

19. jQuery PhotoShoot Plugin

The jQuery PhotoShoot Plugin gives you the ability to convert any div on your web page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.

Each time you click the area, a new shot is added to the slide div with a negative margin to the right. After this an animation starts, which slides it in view and pushes the other shots to the left, hiding the leftmost one. You can freely use the techniques and build upon the code. There are many possible uses especially in navigation systems and promotional sites.

Direct Link

20. jQuery Photo Tagger Plugin

A few days ago, Ben Nadel programmed a little proof-of-concept for Flickr-style photo tagging using jQuery. He did it as an exploration in mouse-based event binding. He took a step further and packaged the jQuery code up into a jQuery plugin (phototagger.jquery.js), build a light-weight ColdFusion persistence layer (drop-and-run, no database required), and turned it into an official project: jQuery Photo Tagger.

jQuery Photo Tagger comes in at about 1,000 lines of code. As such, you can either check out the project page or try the online demo for yourself. Please note that you have to hold CTRL key when clicking mouse to create hotspot.

Direct Link

You Want More?

For more web resources and web design related news and tutorials subscribe to the RSS feed in my site RMDsite.com. For those who run web design and development blog you can submit your article here. Or you may follow @rmdsite in twitter for fresh links and resources updates.

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.