JQuery Colorbox: Create Customized Colorboxes

jquery colorboxJQuery 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.

$('a#login').colorbox();

In this part, we link in ajax to our program.

$.colorbox({href:"thankyou.html"});

In this code, the plugin directly calls a html element

$.colorbox({html:"<h1>Welcome</h1>"});

Here we show the text “Welcome” in a new colorbox.

$("a.gallery").colorbox({rel: 'gal', title: function(){
var url = $(this).attr('href');
return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});

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.

2. Create thee separate folders inside Box. Let’s name them – js_1 to store all javascript files, CSS_1 to store all style sheet files and pic_1 to store all picture files.

3. Download the latest version of jQuery file (http://jquery.com/download/), and the colorbox (jquery.colorbox.js) file. Now you have to save both the files in js_1 folder.

4. Now download the CSS file that comes with colorbox (colorbox.css) and save the same in the CSS_1 folder.

5. Download all the images that come with the colorbox plugin and save it in the pic_1 folder.

6. Now inside the Box folder, create a blank html file. Name the file as “index.html.”

7. Include the lines given below between the <head> and </head> tags in the index.html file:

<link rel="stylesheet" type="text/css" href="css/colorbox.css" />
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

8. We require two major elements inside the html file:.

  1. A link when clicked displays the pop up
  2. Some content that can be displayed in the pop-up.

9. Include the following code between the opening and closing <body> tags of index.html to create a link.

<a href="#" id="prg_link">Click Me</a>

10. Include the code given below between the opening and closing <body> tags. This is to create some test content to be displayed in the popup when you click the link.

<div id="test-content1">
<h1>Test Heading</h1>
<p>
    A lightweight customizable lightbox plugin for jQuery.
</p>
</div>

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.

<a href="#" id="prg_link">Click Me</a>
<div style="display: none;">
<div id="test-content1">
<h1>Test Heading</h1>
<p>
    A lightweight customizable lightbox plugin for jQuery.
</p>
</div>
</div>

11. Include the code below to activate the color box. This code is placed between the opening and closing <head> tags.

<script>
   $("#prg_link").colorbox({width:"60%", height:"300px", inline:true, href:"#test-content1"});
</script>

Now your code inside the <head> and </head> tags will look like this.

<link rel="stylesheet" type="text/css" href="css/colorbox.css" />
<script type="text/javascript" src="js/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$("#prg_link").colorbox({width:"60%", height:"300px", inline:true, href:"#test-content1"});
</script>

12. Save the html file and click on the link to display the colorbox pop up.

The beauty about colorbox is that it is lightweight and highly customizable. You can change just about everything – from appearance to functionality. Colorbox plugin plays a pivotal role in providing images at high speed and high quality. But remember that colorbox is just one aspect of the UI design. You may want to check out this course on indepth UI design with jQuery, or alternatively, if you’re working primarily on a mobile platform, you should check out all about jQuery Mobile with this course.