7 Best JQuery Image Gallery – Photo Slideshow

Javascript & jQuery No Comments

7 Best JQuery Image Gallery – Photo Slideshow

Images are the best option to add life in a website. But plain simple images are now outdated. Splashy, layouts for images are the current hot trends in web designs. Until now this type of image transitions were only available in Flash, but with the help of jQuery now we can actually create some stunning effects, very much flash-like. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. So here, I am going to provide the best jQuery Image Gallery Plugins that will help you to add an artistic and professional image galleries and slide shows to your website.

1 – Galleria:
Galleria is a JavaScript image gallery unlike anything else. It can take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for any project. Galleria clocks around 5k daily downloads, making it one of the most popular JavaScript galleries around. This site is now dedicated to version 1.2, currently in beta development at GitHub. Stable release is set to September 2010.

2 – Supersized:
Supersized is a full-screen background slideshow jQuery plugin. It re-sizes images to fill browser while maintaining image dimension ratio. It cycles images/backgrounds via slideshow with transitions and preloading. It’s navigation controls allow for pause/play and forward/back.

3 – Image Flow:
ImageFlow is a picture gallery, which allows an intuitive image handling. The basic idea is to digitally animate the thumbing through a physical image stack. That intuitive handling is automatically caused by the metaphorical use of the well known process of thumbing through.

4 – GalleryView:
GalleryView is a jQuery Content Gallery Plugin. GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

5 – Easy Slider – Numeric Navigation jQuery Slider:
The Easiest jQuery Plugin For Sliding Images and Content. The features are: auto slide, continuous sliding, “go to first” and “go to last” button, hiding controls, optional wrapping markup for control buttons, vertical sliding, multiple sliders on one page, numeric navigation (as an alternative to next/previous buttons), continuous scroll instead of jumping to the first (or last) slide.

6 – Sliding Boxes and Captions with jQuery:
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

7 – jQuery Cycle Plugin:
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

10 jQuery Plugins for Your Site

Javascript & jQuery No Comments

10 jQuery Plugins for Your Site

Web design, like any type of design, moves through times when certain styles and paradigms are popular. Creating some of the currently popular visual effects can be a difficult task. Added to this challenge are a number of common problems that web developers encounter. Here are 10 jQuery plugins that will help you create stunning visual effects on your web sites and solve many common web application challenges.

Google Feed API Plugin
One common web development task is to include content from another web site or blog on a page. Often this is done in a sidebar or widget. Many blogs and web sites today use Google Feeds to deliver their RSS feeds. The Google Feed API plugin makes it trivial to access a Google Feed and retrieve items to display on your page. This plugin provides a high level interface to the Google Feed API for accessing the feed. After you get the contents of the feed, you’ll have to write code to use the items returned. This makes it possible to literally do anything with the data returned by the API.

A common design technique is to have a large background image that fills the browser window. Many web sites have examples of this design element. Fullscreenr is a jQuery plugin that makes it simple to scale an image so that it fills the browser window. This relieves the designer have having to worry about things like screen resolution. Fullscreenr will take into account aspect ratios and will scale a background image to fill the available area. It can also handle centering the the image.

jMagnify is a neat jQuery plugin that adds a level of mouse interactivity. When you mouse over a block of text, jMagnify will animate the text under the mouse pointer. This plugin has many options for creating interesting text effects. You can enlarge the font under the mouse to create the effect of running a magnifying glass over the line of text (hence the name). You can also change color, underline the text under the mouse pointer or put a box around the letters that moves with the mouse.

jQuery Validity
While a web site should never rely solely on client side form validation, performing validation on the client side can greatly enhance the user experience. Nothing is more irritating than to submit a form, wait a few seconds and then get an error that you didn’t use the right phone number format. JQuery Validity is a jQuery plugin that allows you to easily perform client side form validation. It includes a number of common validation techniques including required fields, ranges, match, non-HTML, maximum and minimum length and more. Validity also supports aggregate validators. These are validators that rely on more than one input such as when you retype a password to confirm the value entered.

jQuery SimpleColor
There really isn’t a whole lot to jQuery SimpleColor. It’s a plugin for creating a simple color picker. I’ve included it because color pickers are common user interface elements.

Pagination is a common web development task. While pagination can certainly be down on the server side, jPaginate creates an interesting visual approach to pagination. This plugin allows you to easily create a scrolling list of page numbers. When you mouse over the right or left arrow, the list of page numbers will animate, scrolling in the direction indicated. This makes it easy to browse through a set of pages without having to click an arrow and wait on a roundtrip to the server to see the links for the next 5-10 pages.

jQuery Rotator
This plugin is probably one of the simplest mentioned so far. It creates an animated effect where elements rotate up. While the demo of this plugin is pretty unimpressive, there are ways that this plugin could be quite useful. The demo shows text blocks rotating much like a news ticker, which is certainly one way this plugin could be used. However, since this plugin rotates elements, those elements could technically contain images, story summaries or any other content. This makes it possible to create interesting rotators highlighting different content.

A common web development problem is how to let users now that a form or page contains unsaved changes. The dirtyFields plugin is one simple solution. This jQuery plugin saves the initial state of form fields and alerts users to unsaved changes by applying CSS styles to fields or even to the entire form. It also works with dynamically added fields.

jQuery Toggable
It’s a common web design technique to have a group of elements that can be hidden or displayed by clicking a single link such as “Show All” or “Hide All”. The jQuery Toggable plugin is a very simple lightweight plugin for implementing this type of behavior. It tracks the status of the toggable elements and animates them appropriately based on their current status.

Element Stack
Element Stack is a personal favorite of mine. I love the effect where a group of images on a web site looks like a stack of photos. Clicking the stack moves the images into a grid making it easy to view them. Clicking again returns them to the stack. Element Stack is a jQuery plugin for implementing this effect. While the effect is most often used on groups of images, it can be used to stack any element. You could create stacks of text or images. It’s a really cool animation effect that web sites are finding new and innovative ways to use.

One of the best strengths of the jQuery library is its ability to be extended through plugins. We’ve shared 10 of our favorite jQuery plugins for creating various effects or solving various web development challenges. Which ones do you use?