How to make your forms better with jQuery?

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.

Say “Good Bye!” to the old, plain looking forms. Using jQuery we can create more interactive and stylish forms. What we need to do is, replace form fields that are difficult to style. jQuery provides lot of plugins which can imitate the behavior of these fields.

Then we need to add some interactivity to forms using auto complete, dynamic validation etc.

Replacing checkbox and radio button

Checkbox and radio buttons were a big problem for designers as the implementations were different in different browsers and it could not be styled. Now we can use simple jQuery plugins to imitate the behavior of checkbox and radio buttons. And these are fully stylable using css. Most of these plugins uses images for different states of checkbox button and hence it can be customized anyway.

Recommended plugins

Replacing Select box

Another browser dependent thing. Some browser supports basic styling but we need more customization.  This plugin replaces select box with a normal input field styled with background image. As it is an image, it is customizable by changing the image.

http://www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement/

Replacing File input fields


Again, browser dependent thing which is almost impossible to style. Using Flash or Iframe, an Ajax effect can be achieved here.

jQuery Plugins for Ajax upload

Or if you want to use normal file input field, http://www.quirksmode.org/dom/inputfile.html has provided a solution using javascript and CSS. But it is not perfect.

Auto complete

It is better usability to automatically suggest something that the user wants.

Restricting input fields

If we need some inputs in certain format, don’t rely on the user to input in that specific way. Instead restrict them to input only in that form. Less error in input.

http://digitalbush.com/projects/masked-input-plugin/

Calendar Plugin

It is always better to show a calendar to pick the date rather than select box or text boxes. Also, user can not select an invalid date.

jQuery UI Date picker is the best calendar plugin. Also try the theme roller for customizing styles.

Form Validation

Instead of throwing errors after form submission, validating the form dynamically as the user types in and showing messages adds more interactiveness to form. User will know what is wrong as soon as he types in some thing. The best plugin to use is,

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Form plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!

http://malsup.com/jquery/form/

Building a reusabe font size controller interface using jQuery

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.

Most of the web2.0 design allows the user to change the font size of the main content area. This is indeed a good usability. So I thought, I should contribute something here. The result is a small jQuery code which can be used to generate a font size changer interface.

Only thing you need to make is a holder element for the controller and then call the function like

fontSize("#holder", "#content", 9, 12, 20);
// holder is the id of the element where the font size controller interface will be shown
// content is the id of the element where the font size changes will take place.
// The next three arguments are Minimum font size, Default font size and Maximum font size respectively

Yes, all done and it will automatically generate all required buttons. It also supports jquery cookie plugin. So when you open the page again, the preferred font size will be restored automatically. (Cookie plugin is not required, but recommended)

After the function is called, the controllers will be generated in the specified area like the following.

Advantages

  • Small size, built on jQuery
  • Fully skinnable using css
  • Multiple interface can be used in the same page for two different content areas
  • Support jQuery Cookie plugin for remembering the preferred font size
  • Very easy to use

The logic

  • The function will be called with the holder element and target element with default, maximum and minimum font size
  • Create three elements for decreasing, default and increasing font size
  • Style the elements using CSS so that it will be fully skinnable
  • Upon clicking read the current font size for the target and calculate the new font size. Then apply it to target element
  • Save the modified font size value to cookie, so that the preferred font size can be saved and restored

The CSS

We need some buttons for the backgrounds and the best places to search is Icon lookIcon Finder and Icon Let as usual. I found the above images, but you can use another or design yours.

Now we need to style the elements. Mainly we need 5 styles – Button for smaller font, default font and larger font. We need two more styles for the disabled state of buttons. (If current font size is the minimum or maximum allowed, we need to show a disabled state).

 
 
.smallFont {
	outline: none; /*for making it look nice in FF */
	background: url(images/font-down.png);
	text-indent: -9999px;
	display: block;
	float: left;
	width: 32px;
	height: 32px;
}
 
.defaultFont {
	/*if you want to hide the default font button, use display:none */
	background: url(images/font-default.png);
	text-indent: -9999px;
	outline: none;
	display: block;
	float: left;
	width: 32px;
	height: 32px;
}
 
.largeFont {
	background: url(images/font-up.png);
	outline: none;
	text-indent: -9999px;
	display: block;
	float: left;
	width: 32px;
	height: 32px;
}
 
.ldisabled,.sdisabled { /*Styles for disabled buttons*/
	opacity: 0.3;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	/*This is for IE8 */
	filter: alpha(opacity = 30);
}

As you can see I’ve used three background images for the three buttons. Need to set the display:block property as the buttons are of 32px height. I could have optimized the css more by applying common styles to elements. For eg: For the three styles only background is different, so it could’ve declared like the following.

 .smallFont, .defaultFont, .largeFont { 
.... /*common properties*/
}
 
.smallFont { background: url(...) } 
...

But I didn’t use that because it will be easier to declare as is now, if you want to use different sized images or different styles for each button.If you want to have multiple styles in the same page, just use the CSS scope

For eg:

 #container1 .smallFont { ... }
#container2 .smallFont { ... }

Now for the disabled state I used same style for all buttons. Using opacity filter is the easiest way to imitate a disabled button. Here for IE8, I have used an extra style after googling around.

The jQuery function

I didn’t write it as a jQuery plugin because I didn’t find it useful to have the chainable functionality.

function fontSize(container, target, minSize, defSize, maxSize) {
	/*Editable settings*/
	var minCaption = "Make font size smaller"; //title for smallFont button
	var defCaption = "Make font size default"; //title for defaultFont button
	var maxCaption = "Make font size larger"; //title for largefont button
 
 
	//Now we'll add the font size changer interface in container
	smallFontHtml = "<a href='javascript:void(0);' class='smallFont' title='" + minCaption +"'>" + minCaption + "</a> ";
	defFontHtml = "<a href='javascript:void(0);' class='defaultFont' title='" + defCaption +"'>" + defCaption + "</a> ";
	largeFontHtml = "<a href='javascript:void(0);' class='largeFont' title='" + maxCaption +"'>" + maxCaption + "</a> ";
	$(container).html(smallFontHtml + defFontHtml + largeFontHtml);
 
	//Read cookie &amp; sets the fontsize
	if ($.cookie != undefined) {
		var cookie = target.replace(/[#. ]/g,'');
		var value = $.cookie(cookie);
		if (value !=null) {
			$(target).css('font-size', parseInt(value));
		}
	}
 
	//on clicking small font button, font size is decreased by 1px
	$(container + " .smallFont").click(function(){ 
		curSize = parseInt($(target).css("font-size"));
		newSize = curSize - 1;
		if (newSize >= minSize) {
			$(target).css('font-size', newSize);
		} 
		if (newSize <= minSize) {
			$(container + " .smallFont").addClass("sdisabled");
		}
		if (newSize < maxSize) {
			$(container + " .largeFont").removeClass("ldisabled");
		}
		updatefontCookie(target, newSize); //sets the cookie 
 
	});
 
	//on clicking default font size button, font size is reset
	$(container + " .defaultFont").click(function(){
		$(target).css('font-size', defSize);
		$(container + " .smallFont").removeClass("sdisabled");
		$(container + " .largeFont").removeClass("ldisabled");
		updatefontCookie(target, defSize);
	});
 
	//on clicking large font size button, font size is incremented by 1 to the maximum limit
	$(container + " .largeFont").click(function(){
		curSize = parseInt($(target).css("font-size"));
		newSize = curSize + 1;
		if (newSize <= maxSize) {
			$(target).css('font-size', newSize);
		} 
		if (newSize > minSize) {
			$(container + " .smallFont").removeClass("sdisabled");
		}
		if (newSize >= maxSize) {
			$(container + " .largeFont").addClass("ldisabled");
		}
		updatefontCookie(target, newSize);
	});
 
	function updatefontCookie(target, size) { //Private function for setting cookie
		if ($.cookie != undefined) { //If cookie plugin available, set a cookie
			var cookie = target.replace(/[#. ]/g,'');
			$.cookie(cookie, size);
		} 
	}
}

I think the code is self explanatory. If you’ve any doubt in code, please feel free to ask here 

Usage

Include the css file, then after including jQuery include this script like the following (Don’t forget to change the path as required. Also, you need to copy the images in correct folder as specified in CSS file or edit the CSS file to make it correct.

<link rel="stylesheet" type="text/css" href="font-controller.css" />
<script src="jquery-1.2.6.pack.js"></script> 
<script src="font-controller.js"></script>
<script src="jquery.cookie.js"></script>

The function can be called inside a $document.ready() as usual. For eg:

fontSize("#container", "#content", 9, 12, 20);

Then inside your html create the empty container for holding the elements. Give it an ID or class, if possible ID.

<div id="container"></div> ... 
<div id="content">... Font size of this element can be controlled.... </div>

Do not copy paste the code from this page. Instead download the full demo from below link

Demo

View Demo | Download full demo

Please feel free to post your comments and suggestions for improvement

Color picker galore!

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.

A color picker allows the users to preview the color and select it by clicking on it. It is useful when you want to provide some customization for the user (for eg: select a background color, letter color etc). But I think is a very useful piece of code in the admin side of a CMS site (Select font color, theme color or anything that you can imagine). There are simple scripts which generates a simple web safe color palette to advanced ones which generates a color palette like Adobe Photoshop.

Here are some cool color picker scripts that can be used. Some of them are written using plain javascript – means you don’t need any javascript library like jQuery, Mootools. And some of them are written specifically for jQuery, Mootools or Prototype (Here the advantage is a smaller footprint. If you’re already using a javascript library like jQuery or Mootools, use the one particularly written for that library). There are more than 10 scripts to choose from.

Plain Javascript scripts for Color picker

There were lot of scripts using plain javascript. Some are larger in size and some uses a popup window interface which is not Web 2.0 standard (It will be considered as an advertisement popup and will be blocked by most of the browsers). I selected three of them which are smaller in size and has the DHTML style popup or inine popup.

Use any of the following if you are not using a javascript library like jQuery or Mootools.

DHTML color picker from Free-color-picker.com

It can handle web safe colors and grays. Triggering can be customized in many ways. Files can be downloaded separately according to your needs. It also supports popup window. It is a small script – just around 8KB. But if you wan to show more colors, you can’t use it. Also, the license states that it should not be modified and the link to the site should not be altered.

DEPENDENCIESNone
SIZE8KB
RESTRICTIONSLicense states that script should not be altered. Also, the link should not be removed.
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

jsColor

jscolor is JavaScript component extending standard form controls of the smooth color pickerpickerize your text fields

It is a good and very easy to use script when you want to show more colors.

DEPENDENCIESNone
SIZE24KB
RESTRICTIONSNone (GPL)
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

Color Jack

It is the smallest of them all – just 3.5KB. Also this site has two other pickers Color Picker v2 and Color Sphere
. Choose one that matches your required style.

DEPENDENCIESNone
SIZE4KB
RESTRICTIONSNone
DEMOColor Sphere | Color Sphere 
Color Picker 1.0 | Color Picker 1.0 
Color Picker V2.0 | Color Picker 2.0
INFO & DOWNLOADOpen

Others

Color Pickers for jQuery

jQuery is a wonderful javascript library and the number of available plugins are growing rapidly. If you’re already using jQuery, choose a color picker from here.

Farbtastic color picker plug-in

Farbtastic: jQuery color picker plug-in

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element’s value when a color is selected.
Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.

DEPENDENCIESjQuery
SIZE9KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Color picker by eyecon.ro

A simple component to select color in the same way you select color in Adobe Photoshop

  • Easy to use and looks good
  • Powerful controls for color selection
  • Easy to customize the look by changing some images
DEPENDENCIESjQuery
SIZE16KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Normal color picker by www.felecan.com

It is a lightweight color picker.

DEPENDENCIESjQuery
SIZELess than 5KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

jQuery color picker by Syronex

It is a simple color picker which is useful when you want to show a defined set of colors and the user should select only from them (For eg: To select a theme color in web sites).

DEPENDENCIESjQuery
SIZELess than 4KB
RESTRICTIONSNone (GPL)
DEMO & DOWNLOADOpen | Open in new window

Others

Color pickers for Mootools

Moo Rainbow

mooRainbow is a powerful Javascript color picker that allows you to visually choose and use colors as a real and useful application.

DEPENDENCIESMooTools
SIZE5KB
RESTRICTIONSNone (MIT License)
DEMO & DOWNLOADOpen | Open in new window

Mootools color picker by Sweetvision.com

The Color Picker displays a Hue selection bar Saturation/Value selection box, Text fields for entering HSV and RGB fields. The dialog for the color picker is drag-able and there are many actions that you can attach function calls to in order to allow your application to respond to events in the Color Picker. The size of the Hue Bar and the SV Box can be set to any size using options. The elements of the Color Picker can be styled to match the design of your site.

It supports two types of interface – a popup layer type and an in-place color picker

DEPENDENCIESMooTools
SIZE12KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Color pickers for Prototype

Color picker by John Dyer

It is a photoshop like color plugin built on prototype library.

DEPENDENCIESPrototype
SIZE10KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Prototype color picker by Myles Eftos

It is a simple color picker which support web safe palette.

DEPENDENCIESPrototype
SIZE5KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Add icons to your links automatically using jQuery & CSS

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.

You want to show a particular icon to a particular type of link. For eg: a pdf icon to all pdf file links, a text document icon to all text document links, zip icon to all links that are linked to zip files etc.

Why jQuery?

Yes, it is not that difficult with css. Just declare some classes and give background images then assign that class to the links as required. Then why we need jQuery. The answer is, for simplicity. Who ever entering the content should be cautious to add the right classes for the right links. Also adding classes are difficult in a blog platform – you will need to switch to HTML view instead of the editor view.

Using jQuery we’ll make sure that the right icon is showing for a particular link.

Step 1 – Find the right icons

Getting a free icon describing your file type is easy. You might need to search for free icon sets, or better search in any of the three following icon search engines. For eg: search for the term “pdf” and you will see a lot of images in different dimensions, select the one that suits your need. Just make sure you’re not using a copyrighted icon 

  1. Icon Look – http://www.iconlook.com
  2. Icon Let – http://www.iconlet.com
  3. Icon Finder – http:www.iconfinder.net

Here I am using five icons – One for pdf files, one for txt documents, one for zip files, one for email links and one for external links. You may add any number of icons for any file type as I am going to describe in the next sections.I’ve selected icons of 16px in size because it look better in content. If you need large icons, you will need to use the css display:block property.

CSS styles

Now we’ve have the right icons. Now we need to add classes with background image.

a.pdf { /*The background image*/
	background: url(images/pdf.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px; /* To center the text vertically with the icon */
}
 
a.txt { /*The background image*/
	background: url(images/txt.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.zip { /*The background image*/
	background: url(images/zip.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.email {
	background: url(images/email.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.external {
	background: url(images/ext_link.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}

Eg:

 
.download a.zip { /*The background image*/
	background: url(images/zip.png) no-repeat left center;
	height: 48px;
	padding-left: 55px;
	line-height: 48px; /* Center the text vertically with image */
	vertical-align: bottom; /* to align the text with image bottom, line height property required */
	display: block; /* Need this to show the images fully */
	float: left; /* You might need this as well for aligning it with the parent element */
}

JQuery

Now, we can write the jQuery statements.

$(document).ready(function() {
 
 
	// Add pdf icons to pdf links
	$("a[href$='.pdf']").addClass("pdf");
 
	// Add txt icons to document links (doc, rtf, txt)
	$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
 
	// Add zip icons to Zip file links (zip, rar)
	$("a[href$='.zip'], a[href$='.rar']").addClass("zip"); 
 
	// Add email icons to email links
	$("a[href^='mailto:']").addClass("email");
 
	//Add external link icon to external links - 
	$('a').filter(function() {
		//Compare the anchor tag's host name with location's host name
	    return this.hostname && this.hostname !== location.hostname;
	  }).addClass("external");
	//You might also want to set the _target attribute to blank
	/*
	$('a').filter(function() {
		//Compare the anchor tag's host name with location's host name
	    return this.hostname && this.hostname !== location.hostname;
	  }).addClass("external").attr("target", "_blank");
	*/
});

For determining the links, we’re using jQuery’s attribute syntax. For eg: To identify PDF links, we check whether the href attribute ends with a ‘.pdf’ extension.

To find external links we’ll compare the anchor tag’s host name with the location host name

Do not copy paste from the above code. It is formatted for viewig. Please download the full source code at the end

demo

It will look like the below image. For an actual demo check the below links.

jQuery seekAttention plugin to get the users attention

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.


The “seekAttention” plugin gracefully get’s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

The definable area (to be called “container” from this point forward) can be the entire page or any element which surrounds the target element and the colour which overlays the container can also be defined by you.

This plugin can be useful for web based tutorials or in forms (May be in validation).

DEPENDENCIESjQuery
SIZE5KB (compressed)
RESTRICTIONSNone
DEMO & DOWNLAODOpen | New window

Improved lava lamp effect for jQuery and Mootools

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.

The lava lamp effect was an excellent technique to turn the navigation to a flash like animation. LavaLamp allows you to add nifty background hover effects to HTML lists in combination with the Easing library.

It is available for bot jQuery and Mootools

LavaLamp – Lava lamp for jQuery

  • Horizontal and vertical movement supported
  • Callback support on completion
  • Easing library support – Can use any supported animation
  • Speed can be adjusted
DEPENDENCIESjQuery, Easing plugin
SIZE5 KB (Uncompressed)
RESTRICTIONSNone
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

Don’t forget to checkout the different easing effects (On top of the demo page)

Fancy Menu – Lava lamp for Mootools

DEPENDENCIESMootools (Latest version requires 1.2)
SIZE2KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Also, check the Barack Slideshow plugin based on the MorphList plugin for Mootools.

Fancy Upload – Ajax file upload for MooTools

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.

Fancy upload is a nice and excellent replacement for the file input field. It uses a flash component called swiff for file upload and other features. But instead of displaying the flash interface, it uses javascript to interact with the flash component and the appearance is fully skinnable using CSS & HTML.

It works on Mootools.

Features

  • Multiple file upload support
  • Filter files by type in file selection dialog box
  • Shows file information before upload
  • Can cancel running uploads
  • Unobtrusive – The flash is replace once it is loaded.
  • Customization
DEPENDENCIESMooTools
SIZELess than 15KB (Flash file and scripts – MooTools library etc)
SUPPORTED BROWSERSAll modern browsers with flash player 9.0 or above
RESTRICTIONSNo
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

This requires Adobe flash player 9.0 or above.

Three lightbox clones for Mootools

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.

Just like jQuery, Mootools also has some nice lightbox clones available.
When compared with jQuery alternatives, one option I found to be missing is the ability to resize image according to the browser window.

You might also want to check the following post

Which is the best lightbox clone for jQuery

Milkbox

One thing I particularly liked in Milkbox is the ability to show slide shows. An interval can be specified.

DEPENDENCIESMootools
SIZELess than 22KB (Uncompressed)
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
SLIDE SHOW MODESupported
IMAGE RESIZENo
DESCRIPTION FOR IMAGESSupported
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMO & DOWNLOADOpen | Open in new window

Slimbox

It is a very lightweight script – just around 4KB.

tr>

DEPENDENCIESMootools
SIZE4KB
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
SLIDE SHOW MODENo
IMAGE RESIZENo
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

Lightbox by phatfusion

One interesting feature is the ability to specify the DIV element that should contain the background (The background layer). So the effects can be either applied to the whole body or to a particular DIV element.

DEPENDENCIESMootools
SIZE10KB
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
SLIDE SHOW MODENo
IMAGE RESIZENo
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMO & DOWNLOADOpen | Open in new window

Agile Carousel – Custom carousel with excellent options

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.

Agile Carousel is a jquery plugin which enables you to create a custom carousel with many many different transition & easing options. It has lots of configurable options like customization of controls, timer, easing type, transition type etc. It does not require jQuery UI plugin but it is recommended for excellent transitions of slides.

We need to specify a directory where slides are stored. The slides can be (X)HTML, images or flash.

Features

  • Excellent transition effects
  • Configurable controls
  • Supports HTML, Flash and images

How it works?

The script works a little differently. It posts the configured options to a PHP file using AJAX. The configurable options specify the slide directories, titles and links. The PHP file parses the options and then it scans through the directory(multiple directories are supported).

The downloaded source package contains this PHP file. The PHP script path is hard coded in javascript, so you might need to edit the path there. Also, it is possible to tweak it to work with any server side scripting languages, not just PHP.

DEPENDENCIESjQuery 1.26, jQuery UI library recommended
SIZE16KB (Minified)
RESTRICTIONSNone (New BSD)
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

Which is the best lightbox clone for jQuery?

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects.

Lightbox is a script made by Lokesh Dhakar which is one of the most popular way for showing images or image galleries. The original lightbox script was written using prototype and script aculous javascript libraries. So the main problem is, we need to include these two libraries (almost 100 KB) again even if we’re using jQuery. Certainly, this is not the best way. Thank fully, some programmers realized the situation and made the clones using jQuery. The effects and functionality are almost similar to lightbox but the only difference is, it uses jQuery library instead of prototype. The size of a compressed jQuery library is only 25KB.

Here, I am reviewing three of the lightbox clones.

jQuery Lightbox Plugin (balupton edition)

Specifications

DEPENDENCIESjQuery
SIZELess than 13KB (compressed)
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
IMAGE RESIZEYes, automatically resizes to fit in browser
DESCRIPTION FOR IMAGESSupported
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo (GPL license)
DEMOOpen | Open in new window
INFO & DOWNLOADOpen in new window

This plugin is easy to use and supports automatic resizing of images(But no option to show unresized image). It is slightly heavier than the other two.

jQuery Lightbox by Leandro Vieira Pinho

DEPENDENCIESjQuery
SIZELess than 7KB (compressed)
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
IMAGE RESIZENo
DESCRIPTION FOR IMAGESSupported
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMO & DOWNLOADOpen | Open in new window

One problem I noticed with this script is, the images are not centered correctly in some cases (Try with an image that almost fits the browser client area). Also it doesnot support image resize. So if a large image is used, one needs to scroll the window to see the whole image. The good side is, it is very light and configurable. Unlike the others, the lightbox should be invoked for the required elements. So you need to use a simple jquery statement to invoke the lightbox (Very simple and fully documented)

Pretty Photo by Stephane Caron

DEPENDENCIESjQuery
SIZELess than 9KB (compressed)
GROUPING OF IMAGESSupported
KEYBOARD NAVIGATIONSupported (Arrow keys & Esc)
TRANSITION EFFECTSYes
DESCRIPTION FOR IMAGESSupported
IMAGE RESIZEYes
FLASH SUPPORTYes
SUPPORTED BROWSERSFirefox 2+3, IE6+7, Safari 3, Opera 9.5
RESTRICTIONSNo
DEMO & DOWNLOADOpen | Open in new window

It looks very good. The animations, centering and resizing of images, are perfectly done. The default styles are also fine. One thing I like is, it automatically resizes the image and an icon is shown in the image to expand it to original size (Very good feature, just like Highslide). Also, it is always centered even if the window is scrolled. But here I suggest to use the jQuery easing plugin for better effects.

Conclusion

As we can see, Pretty Photo is the best considering the features. It also supports flash. The default styles are also nice. So in my opinion, it is the best lightbox clone for jQuery. What do you think? Please let me know your thoughts.