1. Coin Slider
Coin Slider is a jQuery image slider plugin that has unique transition effects.
- 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
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!
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.
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.
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.
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.
- 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
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.
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.
- Cycle through elements
- Adjustable animation times
- Generates a navigation bar that also shows the progress
- Works in modern browsers
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.
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.
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.
- 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.
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.
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.
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.
YoxView is inspired by Lokesh Dhakar’s Lightbox. Like it, YoxView displays images above the website’s content, as a separate layer.
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.
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.
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.
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.
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.