FancyBoxes

Intro

FancyBoxes is a simple Prototype based script, which allows you to individually style your forms. If you ever wanted your checkboxes and radioboxes to look consistant in different browsers or just wanted them to look prettier - FancyBoxes is for you. It's unobtrusive and easy to use.

It's inspired by the jQuery-plugin prettyCheckboxes from Stephane Caron.

If you need help or have features requests feel free to comment to this blog post: Better looking radio buttons and checkboxes with FancyBoxes.

Demos

Just have a look and see what FancyBoxes can do for you.

Installation

FancyBoxes requires the JavaScript framework Prototype. You can grab it here or include it directly via the Google AJAX Libraries API. FancyBoxes uses CSS for styling the checkboxes and radio-buttons so you have to include the css-file which is included in the download. Upload the images for the boxes and your're almost done. All you have to do now is to include the JavaScript and CSS files. If you have other paths or want other images: check the image-paths in the css-file.

It's as simple as this:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'></script>
<script type='text/javascript' src='/fancyboxes/fancyboxes.js'></script>
<link rel="stylesheet" type="text/css" href="/fancyboxes/fancyboxes.css" />

If you don't want to load an exta Stylesheet you could simply copy the contents of /fancyboxes/fancyboxes.css to your default css-file.

How to use FancyBoxes

Usage is really simple. If you use the defaults provided by FancyBoxes all you have to do is this simple call:

new FancyBoxes();

This will convert all your radio-buttons and checkboxes into FancyBoxes. No other steps requried. If JavaScript is disabled the form will still work as normal.

Your input-elements need to be inside a label tag or must have a label tag associated, like so:

<label><input type="text" name="radio" type="radio" value="a" /> Choose A</label>
<label><input type="text" name="radio" type="radio" value="b" /> Choose B</label>
<label><input type="text" name="radio" type="radio" value="c" /> Choose C</label>

<input type="text" name="checkbox" type="checkbox" value="a" id="option_a"/> <label for="option_a">Choose A</label>

FancyBoxes options and API

FancyBoxes has some options, they are all listed below with their defaul values:

new FancyBoxes({
	elements: 'input[type=checkbox],input[type=radio]', 
	autoBind: true, // convert boxes automatically, if set to false you have to call FancyBoxes.bind()
	cssPrefix: 'fb_', // prefix for all css-classes used by FancyBoxes
	display: 'list', // display the box as inline or as list,
	images: false // here you can specify the images to use. It has to be a hash like: {radio: "image.png", checkbox: "image2.png"}
});

Options

// only convert checkboxes
new FancyBoxes({elements: 'input[type=checkbox]'});

// only convert input-elements with the class "fb" 
new FancyBoxes({elements: 'input.fb'});
      
// only convert checkboxes and radio-buttons which are inside an element with the class "fancy"
new FancyBoxes({elements: '.fancy input[type=checkbox], .fancy input[type=radio]'});

// create a array of input-elements and use that:
var my_array = $$('input[type=checkbox]');
new FancyBoxes({elements: my_array}); 
	  

var fb = new FancyBoxes({autoBind: false});
// later you can call      
fb.bind();

new FancyBoxes({cssPrefix: 'my_fb'});

var fb = new FancyBoxes({display: 'list'});

var fb = new FancyBoxes({images: {radio: "radio.png", checkbox: "checkbox.png"});

API

var fb = new FancyBoxes({autoBind: false});
fb.bind();

var fb = new FancyBoxes();
fb.unbind();

Customize FancyBoxes

If you want to create your own keep in mind: Every image contains all three states (checked, unchecked, hovered). If you need bigger or smaller images you have to edit the stylesheet accordingly.

To use other images is easy. You could either use the "images"-option described above or add a new css rule:

label.fb_checkbox span.fb_holder {
	background-image: url(fb/custom_checkbox.png); 
}
label.fb_radio span.fb_holder {
	background-image: url(fb/custom_radio.png); 
}

<label class="xy"><input type="checkbox" name="xy" value="xy" /> xy</label>
<label class="ab"><input type="checkbox" name="ab" value="ab" /> ab</label>
...  
<style type="text/css">    
label.fb_checkbox.xy span.fb_holder {
	background-image: url(fb/custom_checkbox_xy.png); 
}
label.fb_checkbox.ab span.fb_holder {
	background-image: url(fb/custom_checkbox_ab.png); 
}
</style>

<div class="xy"><label class="xy"><input type="checkbox" name="xy" value="xy" /> xy</label>
<label class="ab"><input type="checkbox" name="ab" value="ab" /> ab</label></div>
...  
<style type="text/css">
.xy label.fb_checkbox span.fb_holder {
	background-image: url(fb/custom_checkbox_xy.png); 
}
</style>

License

Download

Changelog

2008-03-07 - added focus state

I added a focus state. With this new feature FancyBoxes is usable if you only want to use you're keybord. Tab through the boxes and select them via space.

Contact