How to use ColorBox Plugin of jQuery

Posted By : Abhishek Banerjee | 12-Dec-2014

Colorbox is jQuery plugin, which we can use to extend jQuery functionality in our document.To use that we have to include “jquery-colorbox-min.js ” and “colorbox.css” in the head section of our HTML document and add few images (download links are mentioned below) in the project folder.

	<html>
		<head>
       		 	<link rel="stylesheet" href="colorbox.css">
       			<script src="jquery.min.js"> </script>
       		 	<script src="jquery.colorbox-min.js"> </script>
  		 </head>
		<body>
	 		Our code goes here
		</body>
	</html>

Usage

Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element.

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

Now I will show you, how to use it by a simple example.

Steps :

1) Create a Web project in your IDE.

2) Create an HTML file in your project, and use this code.

<!DOCTYPE html>
<html lang="en">
	<head>
		
		<title>ColorBox Simple Exapmple</title>
		<script src="jquery.min.js"> </script>
        <script src="jquery.colorbox-min.js"> </script>
		<script src="index.js"> </script>
		<link rel="stylesheet" href="colorbox.css">
		<link rel="stylesheet" href="index.css">

	</head>

	<body>

		<div>
			<span> <a class='name' href="#inline_content"> Welcome! </a> </span>
			<span> <a class='name' href="#inline_content"> User  </a> </span>
		</div>

		<div style='display:none'>
			<div id='inline_content' style='padding:10px; background:#fff;'>

			</div>
		</div>
	</body>
</html>

3) Now create a JavaScript file and use this code.

	$(document).ready(function(){
	
		
		$(".name").colorbox({inline:true, width:"50%"});
	
		$(".name").on ("click",function(){
		
		var content= $(this).text();
		
		$("#inline_content").html(content);
		
		});
	
	});

4) Download these images from the links mentioned below. Create a folder "images" inside your project folder and place all the images in that folder. That folder must be in the same hierarchical level to the "colobox.css" file.

5) Open the html file in any browser, and you are done.

Thanks