Validity : Form validation jQuery Plugin

Validity is powerful jQuery plug-in you can use to setup client-side form validation.
Instead of writing validation manually, plug-in allows you to design client-side validation in
a manner that feels natural and straightforward.

Features:

• Validity is easy to use.
• Rules for e-mail, date, number, URL, time, phone, zip, etc.
• Use of jQuery’s selector engine to perform validation
• Customizable error messages

References:

WebSite: http://validity.thatscaptaintoyou.com
Download: http://code.google.com/p/validity/downloads/list

Top new 8 jQuery Slideshow plugins

Visit my previous post Top 17 jQuery Photo Slideshow / Gallery Plugins for more plugins.

1. Lightweight jQuery Image Slider: Nivo Slider

Nivo Slider is a lightweight jQuery plugin for image sliders.

For browsing images, plugin provides a navigation box and next-prev buttons which appear on hover. It also provides auto-slide feature.

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
• Keyboard Navigation

Website:http://nivo.dev7studios.com
Demo: http://nivo.dev7studios.com

2. Charming Slideshows With jqFancyTransitions

jqFancyTransitions easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
Compatible with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+

Website:http://workshop.rs/projects/jqfancytransitions
Demo: http://workshop.rs/projects/jqfancytransitions

3. Simple jQuery Gallery Plugin: bxGallery

bxGallery is a lightweight jQuery plugin for creating image galleries with thumbnails.

The plugin also has an option for setting the position of the thumbnails (top-bottom-right-left).

Website:http://bxgalleryplugin.com
Demo: http://bxgalleryplugin.com/demos.php

4. Tiny jQuery Slideshow Plugin – simpleSli.de

simpleSli.de is a lightweight jQuery slideshow plugin that can display any HTML content. It is very simple to implement and only 4kb compressed filesize.

Using this plugin we can achieve image slideshow, text information slides, auto sliding HTML content or images and paging system.

It comes with only few options for customization including the speed of the transitions, width of the slider and colors.

Website:http://www.simplesli.de
Demo: http://www.simplesli.de

5. jQuery Image Slider With Attractive Effects: Coin Slider

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

For browsing images, plugin provides a navigation box and next-prev buttons which appear on hover. It also provides auto-slide feature.

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)
• Fully customizable using CSS

Website: http://workshop.rs/projects/coin-slider
Demo: http://workshop.rs/projects/coin-slider

6. Advanced jQuery Image Gallery: jbgallery

jbgallery is a jQuery plugin for displaying multiple images or multiple galleries in a webpage.
jbgallery plugin can display thumbnails of the images for better navigation.

Features

• Picasa adapter: displays images from picasa service
• Keyboard Navigation
• Slideshow in site’s background in dialog mode
• Fullscreen slideshow

Website: http://maxb.net/scripts/jbgallery-2.0
Demo: http://maxb.net/scripts/jbgallery-2.0

7. jQuery Popeye : an inline lightbox

jQuery popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

Though the script is quick and easy to setup, it offers great flexibility in both behaviour and styling.

Website:http://dev.herr-schuessler.de/jquery/popeye
Demo: http://dev.herr-schuessler.de/jquery/popeye/demo.html

8. jPhotoGrid Plugins

jPhotoGrid is simple, lightweight and easy to use jQuery plugin that will help you create nice zoomable image grid.

Website:http://www.newmediacampaigns.com/page/zoomable-jquery-image-gallery-jphotogrid
Demo: http://www.newmediacampaigns.com/files/posts/jphotogrid/example.html

Visit my previous post Top 17 jQuery Photo Slideshow / Gallery Plugins for more plugins.

jQuery Image Power Zoomer plugin

Image Power Zoomer is jQuery plugin that magnifies images on your page. Plugin allows user to zoom in on any portion of the image by simply moving cursor over it. Also allows user to adjust zoom level by scrolling mouse wheel.

Features

• Applies the zoom effect to any image on the page without adding any additional markup to it.
• The default zoom level (ie: 2x) can be changed for each image.
• When the user scrolls the mouse wheel while over the image,
  the zoom level decreases or increases based on the scroll direction. The
  range of zoom can be changed (ie: 2x to 10x).
• The size of the “magnifier” can be changed for each image.

References:

WebSite: http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm
Demo: http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm

YoxView: jQuery Image Viewer Plugin

YoxView is a jQuery plugin for image viewer (Lightbox). Which helps browsing a list of images in a modal box with previous-next buttons or Keyboard buttons. It also support slide show of images.

Features

• Images are resized to fit inside the browser’s window
• Multiple instances in the same page may be used, ideal for blog entries, for example.
• Multilingual and bidirectional – tooltips and button names may be in any language (language packs available!)
• Slideshow-enabled – play images automatically.
• Keyboard access – navigate through images using the keyboard.
• Search engine friendly – large images are indexed.
• Extremely easy to integrate.

The plugin has many options like opacity levels, background colors, playDelay , popupMargin , loopPlay , title display/fade durations & more.

References:

WebSite: http://www.yoxigen.com/yoxview/
Download:http://www.yoxigen.com/yoxview/Download.aspx

Google Maps Plugin for jQuery : gMap

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

Uses

To embed map we need to call simple function like,

$("#map").gMap();

$("#map1").gMap({ markers: [{ latitude: 47.660937,
                              longitude: 9.569803 }] });

It can be customized further with settings like:

• latitude/longitude
• default zoom level
• markers, their positions, info to display as a pop-up, custom marker images
• mapping controls on/off

References:

WebSite: http://gmap.nurtext.de/index.html
Demo: http://gmap.nurtext.de/examples.html

jQuery 1.4 API Cheat Sheet

Future Colors has created cheat sheet for latest version of jQuery 1.4. Which is very useful for jQuery lovers.

References:

WebSite: http://www.futurecolors.ru/jquery
Preview:PNG version
Download:PDF version

jQuery 1.4 Released: The 15 New Features you Must Know

The jQuery team has recently released the major release of the jQuery JavaScript library 1.4. James Padolsey wrote great article “The 15 New Features you Must Know” which is published on tutsplus.com. jQuery lovers must read this article to know the new features included in 1.4 version of jQuery.

Read Article

The 15 New Features you Must Know

Other References:

• http://api.jquery.com
• http://jquery14.com

45 Powerful CSS/JavaScript-Techniques

In this post smashingmagazine present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. It cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons.

Link: Read Article

Top 17 jQuery Photo Slideshow / Gallery Plugins

 

Nowadays Image galleries, slideshows and sliders are becoming more popular. With the jQuery there are many plugins are available. In this post I have collected some of them most powerful and creative plugins using jQuery.

Supersized – Full Screen Background/Slideshow jQuery Plugin

Supersized is the full screen Background/Slideshow jQuery Plugin. It has amazing looks and transition effects.

Features

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles Images/backgrounds via slideshow with transitions and preloading
• Navigation controls allow for pause/play and forward/back

Link:http://www.buildinternet.com/project/supersized
Demo: http://www.buildinternet.com/project/supersized/default.php

Sliding Boxes and Captions with jQuery Tutorial

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.

Link:http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
Demo: https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm

Easy Slider jQuery Plugin

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

Features

• 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

Link:http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
Demo: http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

AnythingSlider jQuery Plugin

CSS-Tricks has create a really full featured slider plugin that could be widely useful.

• Slides are HTML Content (can be anything)
• Next Slide / Previous Slide Arrows
• Navigation tabs are built and added dynamically (any number of slides)
• Pauses autoPlay on hover (option)

Link:http://css-tricks.com/anythingslider-jquery-plugin/
Demo: http://css-tricks.com/examples/AnythingSlider/

Galleria image gallery jQuery Plugin

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Features

• Displays the thumbnail when the actual image is loaded
• CSS powered – create your own gallery style
• Super fast image browsing since the images are preloaded one at a time in the background
• Can be used with custom thumbnails
• jQuery plugin – takes one line to implement

Link:http://devkick.com/lab/galleria/
Demo: http://devkick.com/lab/galleria/demo_01.htm

Create a Beautiful jQuery Slider Tutorial

Tutorial explains how to develop Create Beautiful jQuery sliders with image description and name.

Link:http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation)

Link:http://sorgalla.com/jcarousel/
Demo: http://sorgalla.com/projects/jcarousel/examples/static_multiple.html

GalleryView jQuery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Link:http://spaceforaname.com/galleryview
Demo: http://spaceforaname.com/galleryview#demos

Simple JQuery Image Slide Show with Semi-Transparent Caption Tutorial

This step by step tutorial helps to create a simple image slide show with a semi-transparent caption with jQuery, which is suitable to display news headlines, or a image slide show in your website frontpage.

Link:http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
Demo: http://www.queness.com/resources/html/slideshow/jquery-slideshow.html

jQuery virtual tour

This plugin is usefull to do virtual tour of place, home etc,
This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated] : navigation uses the standard html tags

Link:http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en
Demo: http://www.openstudio.fr/jquery-virtual-tour/salleformation.html

Full Screen Image Gallery Using jQuery and Flickr

Full Screen Image Gallery Plugin is a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It can be used with a flickr search engine, thumbnails, captions, preloader and some other goodies

Link:http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/
Demo: http://devkick.com/lab/fsgallery

jQuery Slideshows With the Cycle Plugin

The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element.

Link:http://blog.themeforest.net/tutorials/jquery-slideshows-with-the-cycle-plugin
Demo: http://blog.themeforest.net/tutorials/jquery-slideshows-with-the-cycle-plugin

jQuery: jqGalScroll

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

Link:http://blog.themeforest.net/tutorials/jquery-slideshows-with-the-cycle-plugin
Demo: http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery

slideViewer

SlideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images.

Link:http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
Demo: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

jQuery lightbox plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

Link:http://leandrovieira.com/projects/jquery/lightbox/
Demo: http://leandrovieira.com/projects/jquery/lightbox/

Dynamic Image Gallery and Slideshow

Link:http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/
Demo: http://sandbox.leigeber.com/slideshow

GalleryView

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Link:http://plugins.jquery.com/project/galleryview

Best Resources and tutorials for future web designs

1. Take Your Design To The Next Level With CSS3

In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects… Read

http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3

2. CSS3 Exciting Functions and Features: 30+ Useful Tutorials

In this post we will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.
Read

3. A Collection of HTML5 Resources and Tutorials

By now everyone has heard of HTML 5 and its new functionalities. Pretty exciting isn’t it… also a little daunting. Of course, there are two sides to the excitement, most developers love it, others feel it has come to soon and we are not ready for it. … Read

4. 33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles

Since previous article about CSS text effects got really big attention I decided to research and find more interesting articles and websites just focused on CSS3, teaching you how to use it, showing pros and cons and much more. Read

5. 22 Photoshop Web Design Interface Tutorial Sites

Article provides good resources for Photoshop Web Design Interface sites…Read

6. 35 Websites To Teach You How To Use CSS Effectively

In this article, you’ll have all the best resources available Read

7. jQuery UI

jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessibility, flexible styling, and user-friendly design. Visit

8. 55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

jQuery definitely is one of the biggest trends coming in up-to-date designs and the best of all, everything is done without countless code lines. Keeping in mind such aspects I created hopefully pretty complete collection of jQuery sites, tip and trick articles, video screencasts, tutorials, cheat sheets and lot’s more. Took a while to compile and research was really solid. Read