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.

Thursday, April 26, 2012

prettyPhoto - jQuery lightbox clone

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)!
Home : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
Demo : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

AjaxML - A New Standard for AJAX

If you are using then most probably you know how easy it is to implement AJAX with help of jQuery. There a even more easier plugin now to use AJAX. AjaxML is a set of functions that allow you to declare Ajax behaviour in your web pages with as little coding as possible. In fact, if you have no special needs beyond basic XHR use, you need no code at all. The idea is simple. A set of attributes added to your web page elements specify what you need to be done. 
AjaxML was designed to decrease development time of Ajax requests, as it was measured to reduce development time upto 60% from time consumed using normal jQuery ajax. It take care of forms submitting with Ajax as hyperlinks. One of the problems of ajax requests is bookmarking feaure loss, and broswer history support is another headache. Using AjaxML, you can just mention what is the hash value for your link, and that's it.
Home : http://www.ajaxml.com/
Demo : http://www.ajaxml.com/examples.html

Wednesday, April 25, 2012

Glisse.js - jQuery Photo Viewer

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You'll like the transitions between two pictures entirely assumed by CSS3. There are two examples to see this plugin in action. Some nice pics from Nepal are there in the example. It is compatible with Firefox 4+, Opera 11.6+, Chrome 14+, Safari 5+, iPhone/iPad iOS 4.3+ and BlackBerry OS v6+ and supports CSS3 transitions nicely. Without CSS3 transitions, it works in Opera 10+, Firefox 3.6 and IE8+.
  • Keyboard navigation
  • Fully CSS Customizable
  • Animated with CSS3 keyframes
  • 7 different transition effects
  • Scale to the viewport
  • Fullscreen support
  • iPad & iPhone ready
Home : http://glisse.victorcoulon.fr/
Demo : http://glisse.victorcoulon.fr/example-1/

Monday, April 23, 2012

SIDEWAYS – jQuery fullscreen image gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS. It utilizes the jQuery UI (jQuery User Interface)jQuery Easing by George McGinley Smith and Brandon Aaron’s jquery mousewheel plugin. It has lots of cool features and have to admit it is one the best image galleries based in jQuery. It is smooth and elegent image gallery and such a great way to display photos in a rich interactive manner.
Home : http://manos.malihu.gr/sideways-jquery-fullscreen-image-gallery
Demo : http://manos.malihu.gr/tuts/sideways_jquery_fullscreen_image_gallery.html

Sunday, April 22, 2012

COIN SLIDER - jQuery Image Slider with Unique Effects

Coin Slider is a nice jQuery plugin with more unique effects. It comes with navigation box and links. It is compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+. Its main features are listed below.

  • Free to use under MIT licence
  • Unique transition effects
  • Valid markup
  • Flexible configuration
  • Auto slide
  • Navigation box
  • Compatible with Android and iPhone
  • Lightweight (8kb only)
  • Linking images
  • Fully customizable using CSS
Home : http://workshop.rs/projects/coin-slider/
Demo : http://workshop.rs/projects/coin-slider/

Friday, April 20, 2012

Rhinoslider - The most flexible jQuery slider/slideshow

Rhinoslider is a multiple effects jQuery slider. It can be used as a simple fading or sliding jQuery slideshow or as a rich effects jQuery slider. Each effect can be applied to run in different directions and it is possible to create individual effects by changing the settings.
There is also a tool in the site : The Generator. With the generator you can set up nearly all options and arguments, even if you're not familar with the usage of jQuery plugins. This is a very flexible jQuery slider. You can pass a lot of arguments to customize your version of Rhinoslider. There are options for callback and callbefore functions, styling, effects, behaviour and for user controlling. Rhinoslider also provides an easy keyboard and mouse-wheel navigation.It is not only able to apply all the effects and settings to image elements but also to every kind of html elements.
Home : http://rhinoslider.com/
Demo : http://rhinoslider.com/demo-download/

Thursday, April 19, 2012

9 jQuery Mistakes you Should not Commit

jQuery is so easy to use that sometimes we just forget that it's not CSS. While using CSS, we don't have to give much thought to performance, because it's so fast that it's not worth the effort to optimize it. But when it comes to the real world, jQuery can drive developers crazy with performance issues. Sometimes you lose precious milliseconds without even noticing it. Also, it's so easy to forget about some functions and we keep using the old (and not-so-good) ones.
Let's take a look at a few of the most-common-and-easiest-to-fix mistakes while using jQuery in your projects.
  1. You aren't using the latest jQuery version
    Each version update means higher performance and several bug fixes. The current stable release is 1.7.2, and I'm pretty sure you know about plenty of sites developed using 1.6 and below. Ok, ok, you can't just update every old site for every jQuery update (unless your client is paying you to do so) but you should at least start using it for your new projects. So, forget about this local copy and just grab the latest release every time you start a new project.
  2. You aren't using a CDN-hosted copy of jQuery
    How many unique visitors you've got last month? I bet the number is still under 1 billion, right? So you'd better use Google's copy of jQuery instead of yours. If your user still has the cached file of Google's website (or from many other sites that uses its CDN) his browser will just get the cached version, improving a lot your website's performance. You can use it by copying & pasting this HTML:
    <script type="text/javascript" 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
  3. You aren't using a fallback for CDN version
    I know I said Google is awesome and stuff, but they can fail. So, every time you rely upon external sources, make sure you have a local fallback. I've seen this snippet in the HTML5 boilerplate source code and just found it amazing. You should use it too:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script>
    window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">
    <\/script>')
    </script>
    
  4. You aren't chaining stuff
    While doing common operations, you don’t need to call the element every time you want to manipulate it. If you're doing several manipulations in a row, use chaining, so jQuery won't need to get the element twice.
    Instead of this:
    $("#mydiv").hide();
    $("#mydiv").css("padding-left", "50px");
    
    Use this:
    $("#mydiv").hide().css("padding-left", "50px");
    
  5. You aren't caching stuff
    This is one of the most important performance tips. If you'll call an element at least twice, you should cache it. Caching is just saving the jQuery selector in a variable, so when you need to call it again you'll just reference the variable and jQuery won't need to search the whole DOM tree again to find your element.
    /* you can use it this way because almost every jQuery function returns
    the element, so $mydiv will be equal to $("#mydiv"); also it's good to
    use the $mydiv so you know it's a jQuery caching var */
    
    var $mydiv = $("#mydiv").hide();
    [.. lot of cool stuff going on here...]
    $mydiv.show();
    
  6. You aren't using pure js
    Specially for attributes modification, we have several built in methods to get stuff done with pure javascript. You can even "convert" jQuery objects back to DOM nodes to use them with simpler methods, like this:
    $mydiv[0].setAttribute('class', 'awesome'); 
    //you can convert jQuery objects to DOM nodes using $jqObj[0]
    
  7. You aren't checking plugins before including in your site
    You know, jQuery is not the hardest thing in the world to code. But good JS (and jQuery), that is pretty hard. The bad news is that while you aren't a good programmer, you'll have to rely on trial and error to find out what is good and what isn't. A few points you must be aware of while including a plugin in your project:
    • File Size (the easiest to check!) - if a tooltip plugin is bigger than jQuery source, something is really wrong;
    • Performance - You can try it with firebug and others. They give you easy to understand charts to you'll know when something is out of place;
    • Cross-browsing - Test, at least on IE7, but Chrome, Firefox, Safari and Opera are good ones to try also
    • Mobile - Don't forget that everything is getting mobile. See if the plugin works, or at least doesn't crash your mobile browser
  8. You aren't open to remove jQuery
    Sometimes it's just better to remove it and use simple ol' CSS. Actually if you want, for instance, an opacity hover, or transition can be done with CSS along with good browser support. And there's no way jQuery can beat plain CSS.
  9. You are using jQuery for server side tasks
    I know that masking and validating are good, but don't rely just on jQuery for those. You need to recheck everything on the server side. That is especially important if you are thinking about using AJAX. Also, make sure everything will work with JS disabled.
Source : Here

FitVids : jQuery plugin for fluid width video embed

Sometime we need to re-size the video size in the page on the resizing of the page for retaing of the page structure and layout. It would be tedious job and even more hectic if your page is full of videos.
There is one solution which is quick and easy . "FitVids.js" .
FitVids.JS is a jquery plugin that makes it so all YouTube, Vimeo, and other embedded videos automatically scale to "best fit" within an area. It is lightweight and easy-to-use .
Home : http://fitvidsjs.com/
Demo : http://fitvidsjs.com/

 
back to top