iView Slider : Responsive jQuery Slider Plugin

iView Slider is a responsive jQuery slider plugin for image slider.

Aviaslider - unique jQuery slideshow plugin

Aviaslider is a unique slideshow plugin with several transition effects.

jWindowCrop : For facebook like image cropping

jWindowCrop is jQuery plugin for easy zoom and pan image cropping.

Digicrafts - Thumbnail Gallery jQuery Plugin

Digicraft is a jQuery plugin to display thumbnail gallery with XML support.

RefineSlide : jQuery Slider Plugin

RefineSlide is a slider with CSS transition and 3D trasnform support.

Tuesday, October 30, 2012

Quake Slider : jQuery Image Slider Plugin with Cool Transition Effects

Quake Slider is a jQuery based image and content slider with some cool animations effects with some of them being very unique. Like SwirlFadeIn, SwirlFadeOut and more. With this slider you can combine images with short summary/caption that helps you optimize contents for search engines and make SEO easy for you. You can also link your images to open detail for particular slide/image. You have complete control over not just the orientation of each caption but you can also control the animation for each caption and provide different animations for each of the slides using callbacks.
Quake Slider : jQuery Image Slider Plugin with Cool Transition Effects
Quake Slider

10 Excellent Free jQuery Star Rating Plugins

Ratings are very popular nowadays. Rating is done for the evaluation or assessment of quality or standard of something. Here is a collection of some nice jQuery rating plugin which will save some of web developers.
  1. jRating : Very flexible jQuery plugin for creating quickly a star rating system
    jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every details from "the number of the stars" to "if the stars can represent decimals or not". There is also an option to display small or big stars and images can be changed with any other file easily.
    jRating : Very flexible jQuery plugin for creating quickly a star rating system
  2. RateIt : a jQuery star rating plugin
    RateIt plugin is a star rating plugin for jQuery. Fast, Progressive enhancement, customizable (just swap out the images, or change some CSS), Unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you'd like, and also any step size.
    RateIt : a jQuery star rating plugin
  3. jQuery Star Rating Plugin
    The jQuery Star Rating Plugin is a plugin for the jQuery Javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes. It turns a collection of radio boxes into a neat star-rating control. It creates the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled.
    jQuery Star Rating Plugin
    jQuery Star Rating Plugin
  4. Star Rating Plugin for jQuery
    Star Rating plugin is easy to use rating control system. It takes a normal select box, and turns it into a rating that your users can click on. The select box is preserved so you can still bind on change, get, and set the value in the rating control. The image is controlled with CSS and a simple gif, so you can make it look like anything you need.
    Star Rating Plugin for jQuery
    Star Rating Plugin for jQuery
  5. jQuery Star Rating Plugin beta
    jQuery Star Rating Plugin beta is quick and simple star rating plugin for jQuery. This is a fully degradable plugin that creates the Star Rating interface based on a simple form structure. It has support for keyboard navigation.
    jQuery Star Rating Plugin beta
    jQuery Star Rating Plugin beta
  6. jQuery Simple Half-Star Rating Plugin
    This is a jQuery plugin for star rating systems. The initial inspiration for this script came from Wil Stuckey's star rating system. But the original script requires too much coding. Also it does not have provision for developing a star system (such as GMail, where you star or un-star an email).
    jQuery Simple Half-Star Rating Plugin
    jQuery Simple Half-Star Rating Plugin
  7. Star Rating (jQuery Plugin)
    You can reveal pretty rating stars by this plugin. This plugin working fast because there is no user options. Just include and call it. If you would like store votes in a database then you must use callback method.
    Star Rating (jQuery Plugin)
    Star Rating (jQuery Plugin)
  8. jQuery Rater Plugin for Star Ratings
    This rating plugin is a neat control to add in your website. It has many options that allow you to easily customize it. However, it's usage is based on a fully degradable form submission model which means you must use markup containing an option list.
    jQuery Rater Plugin for Star Ratings
    jQuery Rater Plugin for Star Ratings
  9. Unobtrusive AJAX Star Rating Bar
    Unobtrusive AJAX Star Rating Bar is a jQuery plugin for star rating system which worls unobtrusively. That means if Javascript is off it will still work (although the page will refresh).You can also set the number of rating units you want to use.
    Unobtrusive AJAX Star Rating Bar
    Unobtrusive AJAX Star Rating Bar
  10. jQuery Raty - A Star Rating Plugin
    jQuery Raty is a nice and elegant star rating plugin developed on jQuery javascript library. It generates customizable stars automatically.
    jQuery Raty - A Star Rating Plugin
    jQuery Raty - A Star Rating Plugin

Saturday, October 27, 2012

PFold jQuery Plugin – Paper Like Unfolding Effect

PFold is a very experimental jQuery plugin that makes it possible to open elements in a paper-like unfolding effect. An element can be unfolded in 3D in order to reveal some other content. The idea is to have several levels of folding, where each step of opening will double the element size, hence imitating a folded paper being opened. A couple of options are available, such as the unfolding direction for each step and the number of folding steps. For browsers that don’t support CSS 3D transforms or transitions, there will be a simple fallback, i.e. the larger content appears.
PFold jQuery Plugin – Paper Like Unfolding Effect

Wednesday, October 24, 2012

11+ best jQuery lightbox plugin scripts [lightbox alternatives]

jQuery lightbox plugins are being widely used in websites and web applications. They are used for presenting images, videos and html content in an elegant and very focused way. A page with lightbox enabled elements e.g. images a user click will open a modal window where a larger version of the image is presented. The advantages are obvious as users are not required to leave the page to view the content presented by the lightbox and because the area around the featured element is typically faded out focus is increased at what is important. Everyone loves lightbox javascript effects, since the original Lightbox script there has been countless clones generated for all the popular Javascript libraries. Here is a list of some best jQuery lightbox scripts you can find and use them free.
  1. jQuery lightBox plugin
    jQuery lightBox plugin
    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. lightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar.
  2. ColorBox
    ColorBox is a lightweight customizable lightbox plugin for jQuery. It supports photos, grouping, slideshow, ajax, inline, and iframed content. Its appearance can be controlled through CSS so it can be restyled. Also this plugin can be extended with callbacks & event-hooks without altering the source files. It is completely unobtrusive, options are set in the JS and require no changes to existing HTML.
  3. FancyBox
    fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages in "lightbox" style. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize. It is a responsive lightbox plugin and can be extended using helpers. This plugin uses CSS3 for shadows and rounded corners.
  4. Facebox
    Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Lots of options are availabe in this plugin to customize it as per your requirement.
  5. ChillBox
    Inspired by Lokesh Dhakar's Lightbox, ChillBox is a simple, unobtrusive script used to overlay images on top of the current page. ChillBox has been developed using the jQuery Framework. ChillBox does not require the use of images for buttons and is fully rendered using jQuery. ChillBox is fully customisable and you can change the range of options to create a unique version of ChillBox that works with a website theme. ChillBox is fully compatible with web browsers Internet Explorer, Firefox, Opera, Safari and Google Chrome.
  6. Clearbox
    Clearbox 3 is a Lightbox-like modal box script to display images, image galleries & various other contents including Flash, Quicktime, Windows Media formats, HTML, inner content, etc. It can show multi-line text information for any content displayed. And, as a unique feature, images displayed can be rotated with a click. Clearbox supports slideshow functionality and every aspect of it can be customized from the settings of the script. It is friendly with Ajax & can display content via Ajax calls. Also, its interface can be presented in any language by supplying a language file.
  7. GreyBox jQuery Lightbox
    GreyBox jQuery Lightbox
    GreyBox jQuery Lightbox
    GreyBox jQuery Lightbox can be used to display websites, images and other content in a beautiful way. You can easily alter the style as it is controlled through CSS. It is very lightweight and it doesnot conflict with popup blockers. Easy to setup and easy to use.
  8. Fresco : A beautiful responsive jQuery lightbox
    Fresco : A beautiful responsive jQuery lightbox
    Fresco is a beautiful responsive lightbox. It can be used to create stunning overlays that work great at any screen size, in all browsers on every device.In fact, Fresco in the first truly responsive lightbox. This handles galleries very vell and has a variety of options. Also it's highly cross browser compatible. To make things even more awesome Fresco comes with fullscreen zoom, retina-ready skins, Youtube and Vimeo integration for HTML5 video and a powerful Javascript API.
  9. Lightview - The jQuery Lightbox
    Lightview - The jQuery Lightbox
    Lightview - The jQuery Lightbox
    Lightview allows you to easily create the most beautiful overlay windows using the jQuery Javascript library. It supports wide range of medias with gorgeous skins and user friendly APIs. Lightview uses HTML5 to help you deliver the best experience across every browser.
  10. Pirobox Extended - jQuery plugin
    Pirobox is an awesome jQuery lightbox plugin that features a slider functionality. It is available free. It has ability to open any kind of files, from inLine content to the swf files, from simple images to pdf files. Another important features are automatic image resizing and drag and drop.
  11. jQuery Superbox
    jQuery Superbox
    jQuery Superbox
    jQuery Superbox! is a script which allows you display windows with the lightbox effect. This plugin is based in jQuery javascript library. It can display pictures, pictures galleries, external pages, a page element or even AJAX loaded content.
  12. prettyPhoto
    prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It's a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!

Sunday, October 14, 2012

Foggy – jQuery Plugin for Blurring Page Elements

Foggy is a jQuery plugin for blurring page elements. It supports IE (8 and up), Firefox, Safari and Chrome. Foggy by default uses the "-webkit-filter: blur" CSS attribute. If the browser doesn't support it, Foggy falls back to a manual blur. It makes several copies of the selected HTML element. It adds transparency to all copies and moves each of them by small amount, thus creating the blur effect.
Foggy – jQuery Plugin for Blurring Page Elements

Home : http://nbartlomiej.github.com/foggy/
Demo : http://nbartlomiej.github.com/foggy/

Friday, October 12, 2012

A Beginner’s Guide to jQuery

jQuery’s core functionality has a whole host of cool things to explore. jQuery allows you to manipulate HTML elements, transverse around the document, add event listeners (e.g. when you click on an element), perform AJAX requests and effects.
If you don’t know what jQuery is or if some of these terms don’t mean anything to you, don’t worry, we’ll be covering some of these concepts down below.

The Basics

JavaScript is used to add interactivity to the front end of a website. A term often used to describe this type of interactivity on a website is behaviour.
JavaScript works slightly differently in each browser, so people turn to jQuery, a JavaScript framework, to smooth out some of those inconsistencies.
A framework can save us time since the code we’d want to use in many of our projects has already been written in the framework and is often written by a developer or developers with years of experience.
To include jQuery in your project visit jQuery.com and click the big download button. Right click and save it to where your HTML is, most people keep their JavaScript files in a separate folder from their HTML.
It’s best practice to include your JavaScript files at the bottom of your HTML document, just before the closing body tag. If you downloaded jQuery to a folder named js with the name jquery.js and your HTML files were in the same directory as the js folder you’d include it in the following way.
<body>  …  <script src="js/jquery.js"></script>  </body>
You’ll want to create an app.js as this is where we’re going to put our jQuery code.
<body>  …  <script src="js/jquery.js"></script>  <script src="js/app.js"></script>  </body>

The jQuery Function

Now that you’ve included jQuery in your project you need to know how to select HTML elements with jQuery. jQuery is a function that can be passed a series of arguments, the most common is a string containing a CSS selector. You use these selectors in order to select HTML elements to apply behaviour. If you wanted to select all paragraphs on a page you would write the following in a new script tag or in our case app.js:
Since p is the CSS selector for selecting all the paragraphs I passed in the string of "p" to the jQuery method. If I wanted to select all elements with the class error I would write the following:
Whilst you can use the jQuery method in full every time you want to select HTML elements, there is a more common short hand way to call the jQuery method, and that’s $. Our two previous examples can be written as $("p") and $(".error"). Throughout the rest of the post we’ll be using the short hand, $.

The Principle of Least Surprise

Now that you know how to select elements it’s time to add behaviour to them. jQuery has a simple interface to apply behaviour. Simply add the method that applies the desired behaviour to the end of the selected elements. If we wanted to hide a paragraph with the class error we call the hide() method.
<p class="error">This is initially hidden.</p> <p>This is not hidden</p>
It’s that simple. jQuery is designed with the principle of least surprise in mind. You want to show a hidden element? Call show(). Want to vary it’s speed? Pass in a number of milliseconds on how fast you want the animation to take or pass in the string of "fast" or "slow".
So if you want to show the error message slowly after initially hiding it you could do the following.
<p class="error">This is initially hidden, then slowly revealed.</p>  <p>This is not hidden</p>
$("p.error").hide();  $("p.error").show("slow");
And there you have it, you've done you're first jQuery effects.

Chaining it All Together

jQuery lets you keep your code DRY. DRY is an acronym for don't repeat yourself. jQuery allows you to chain methods together so that the above example can be written as:
While lines can get lengthy it's often a way to reduce lines of code and do more.

Going Deeper

You've seen how easy it is to do effects, let's show you how to do some simple DOM transversal. DOM stands for Document Object Model. This is how a browser represents HTML in memory like a tree.
<html> <body> <ul> <li>Apple</li> <li>Amazon</li> <li>Google</li> <li>Microsoft</li> </ul> </body> </html>
The html would be the parent of the body, body would be the parent of the unordered list (ul) and the unordered list would be the parent of all the list items (li). You can access an elements parent in jQuery by using the parent() method. Say we want to hide each list item and before the unordered list we wanted to add a link with the text Show Tech Giants.
First we want to select the list items.
Then hide them.
Then select the parent DOM element, which will be the unordered list.
Be careful when chaining with jQuery transversal methods such as parent(), prev() and next() as they all return a new element rather than the initial element. We can then use the before() method which inserts a given string in to the DOM before the newly selected element, the parent, or the unordered list.
$("li").hide().parent().before("<a href='#'>Show Tech Giants</a>");
So you've done effects to hide, transversal to select a parent element and manipulation to add new HTML on-the-fly. Now we're going to use jQuery's event method click() to listen for click events on the link we've just included.
$("li").hide().parent().before("<a href='#'>Show Tech Giants</a>"); 
The click method takes one argument which is a function. This is the code you want executing when you click.
 $("li").hide().parent().before("<a href='#'>Show Tech Giants</a>"); $("a").click(function(){ /** Code to be executed **/ });
We're going to show the list items when the link is clicked.
$("li").hide().parent().before("<a href='#'>Show Tech Giants</a>");  $("a").click(function(){   $("li").show();  });
The click listener can be bound to other HTML elements such as a div, span or whatever element you want. You're just not restricted to links.


In conclusion you've seen how easy it is to do effects, DOM transversal, events and manipulation in jQuery. Why not head over to the jQuery Documentation website to see what other cool things you can do in your next project!
Source : teamtreehouse

Windy – jQuery Plugin for Swift Content Navigation

Windy is a jQuery plugin that allows a rapid navigation through a pile of items using some CSS 3D transforms and transitions. The effect of a continuous navigation flow reminds of a deck of cards or sheets flying away, hence the name.
There are several options available, including defining the range of spreading the items when navigating, speed (CSS transitions), adding custom navigations, etc.
Windy – jQuery Plugin for Swift Content Navigation
For browsers that don’t support CSS 3D transforms or transitions, there will be a simple fallback, i.e. normal navigation of the items (appear/disappear).

Monday, October 8, 2012

Tiny Circleslider - A lightweight circular carousel plugin for jQuery

Tiny Circleslider is a circular slider / carousel. That was built to provide web developers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library.
Tiny Circleslider - A lightweight circular carousel plugin for jQuery
Tiny Circleslider

back to top