JQuery Colorbox: Create Customized Colorboxes

JQuery is a fast and effective JavaScript library that helps in HTML document traversing, event handling, animations and Ajax Interactions. JQuery does away with the need to write multiple lines of code in order to achieve complex functionality. There are a large number of jQuery plugins available for every conceivable function. These plugins are widely used to reduce the need to write fresh code each time and greatly enhance productivity. To use jQuery plugins, you should know the basics of HTML, JavaScript and CSS (if not, you can first learn how HTML and CSS work together from this course).

Today, we walk you through colorbox, which is one of the major jQuery plugins. If you are not familiar with jQuery, we recommend that you go this fundamental jQuery training to get a better understanding.

What is the Colorbox Plugin?

Colorbox is a lightweight and customizable jQuery plugin. It is used to display slideshows, photos, photogroups, and framed content in a pop up. It can be used to create customized pop ups on a webpage. This plugin was developed by Jack Moore. The generic syntax for the colorbox plugin looks like this

$(selector).colorbox({key:value, key:value, key:value});

Here the “Selector” is an html element. The “key” stands for an attribute and is paired along with its value. Let’s go through some of the examples given below which uses the jQuery colorbox plugin.

$('a.gallery').colorbox({rel:'gal'});

This code displays the group of images that you have stored in the image folder.

In the above code, the plugin accepts a function as a parameter. You can do anything you want (well, just about) in this function.

Now that we have gone through some basic examples, let’s move on to take a look at some of the important features of this jQuery plugin.

Features of the JQuery Colorbox Plugin

The colorbox plugin is compatible with jQuery version 1.3.2+ in all major browsers such as Internet Explorer 7+, Opera, Google Chrome, Firefox and Safari. It supports grouping, slideshow, photos, ajax, inline and iframe content. The total size of this jQuery plugin is 10KB and less than 5KB when zipped, this mean it doesn’t eat up too much of your server space!

The plugin can be styled to suit your website, since its appearance is controlled through CSS. It can be extended with callbacks without changing the source files. The plugin options are set in JavaScript with the existing HTML not requiring any change.

Colorbox Plugin is released the under the MIT License. Nearly two million websites currently use this plugin. So you’re in good company!

How to use jQuery Colorbox to create a pop-up

1. Create a folder on your desktop and name it. Let’s name it “Box.” We will store all our files inside this folder.

Wrap the content inside <div style=”display: none;”> and </div>.Now the content is inside a hidden div and hence not visible. This is because the content should be displayed only on clicking a link. Now your code will look like this.