How to use jQuery Colorbox
What is jquery Colorbox
Colorbox is a light-weight, customizable jquery plugin which can be used to display photos, photo groups, slideshows, ajax, inline, and iframed content in a pop up.
It is one of my favorite jquery plugins, which I use to create pop ups on a web page. You can create any kind of customizable pop ups to display the content of a div tag, any picture, or any html.
Click here to see Colorbox demo
How to use jquery Colorbox
Step 1: Make a folder on your desktop, and give it a name. Lets say- “Project”. We will keep all our files inside this folder.
Step 2: To keep the structure organized, make 3 separate folders inside Project –
- js to store all javascript files
- css to store all stylesheet files
- images to store all picture files
Step 3: Download the latest jQuery file (jquery-1.3.2.js), and the colorbox file (jquery.colorbox.js). Save both the files in js folder.
Step 4: Download the css file that comes with colorbox (colorbox.css) and save it in css folder.
Step 5: Download all images that come with the colorbox plugin. You can also download all these images from here. Save all the images in images folder.
Step 6: Now inside the main Project folder, create a blank html file. Name it as “index.html“.
Step 7: Write the following lines of code between <head> and </head> tags of “index.html” to include the js files and css files.
<link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
Step 8: Now we need 2 main elements inside the html file.
- A link that can be clicked to bring the popup
- Some content that can be shown in the pop-up
Step 9: Write the following line of code between the <body> and </body> tag of “index.html” to create a link.
<a href="#" id="test-link">Click Me</a>
Step 10: Write the following lines of code between the <body> and </body> tag of “index.html” to create some test content that can be displayed in the popup when the link is clicked.
<div id="test-content">
<h1>Test Heading</h1>
<p>
This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense.
</p>
</div>
Step 10: Now wrap the content div inside <div style=”display: none”> and </div>. By doing this we are wrapping our content inside a hidden div so that our content is not visible. It is because we want the content to be displayed only on clicking a link. Now our code inside the <body> and </body> should look something like this.
<a href="#" id="test-link">Click Me</a>
<div style="display: none;">
<div id="test-content">
<h1>Test Heading</h1>
<p>
This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense.
</p>
</div>
</div>
Step 11: Now write the following line of code between <head> and </head> tag to bring the colorbox in action.
<script>
$("#test-link").colorbox({width:"60%", height:"300px", inline:true, href:"#test-content"});
</script>
Step 11: Now our code inside the <head> and </head> should look something like this.
<link rel="stylesheet" type="text/css" href="css/colorbox.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$("#test-link").colorbox({width:"60%", height:"300px", inline:true, href:"#test-content"});
</script>
Step 12: That’s it. We are done. Just save your html file, and click on the link to see the colorbox popup in action.
The best part about colorbox is that it is extremely light weight. It is less than 9kb in size and is highly customizable. You can change anything and everything from appearence to functionality. You can also use a lot of options with it. For a complete list of options and detailed description, please visit the Colorbox homepage.
Vikram Mehta's Blog 
hi vikram,
i am in the process of building a site and like to use colorbox to have a slideshow (i like example2),
here is what i would like to do:
have a folder called colorbox on my server including all files colorbox needs,
built the colorbox index page with all the photos i like to show,
here comes the stuff i cannot figure out:
how can i just click on a text link on any page of my site to call the colorbox index page to load automatically ?
greetings,
harry
February 1, 2011 at 2:05 am
Hi Harry,
Instead of creating a separate colorbox index page (with all the photos) , you can put all the photos inside an “image” folder;
Then you can use the anchor tag to link to the image like this:
And you can write the following line in jquery to invoke the function:
$("a.picture-popup").colorbox({width:"75%", height:"85%"});February 1, 2011 at 9:51 am
thanks for your reply,
just want to make sure i understand this:
make a colorbox folder including image folder, js folder, css folder, and no index page,
then put the href link on my pages in the navigation where i am then be able to click a text opening the slideshow (example2)
if this is correct then where do i insert this code:
$(“a.picture-popup”).colorbox({width:”75%”, height:”85%”});
again, thanks a lot for your time,
greetings
harry
February 2, 2011 at 4:53 am
i asume the line of code ” $(“a.picture-popup”).colorbox({width:”75%”, height:”85%”});”
goes in: jquery.colorbox-min.js
if this is right then where do i acactly place it ?
greetings
harry
February 2, 2011 at 7:49 pm
Hi Harry,
The line of code “$(“a.picture-popup”).colorbox({width:”75%”, height:”85%”});”, will not go in jquery.colorbox-min.js file. It will be placed in “main.js” file, or it will go inside <script type=”text/javascript”> and </script>; which will be placed inside the header section (head tag).
So, you will need to create a main folder (which you can name anything), and inside that, you need to create 3 sub-folders: (1)js – To store all javascript files (jquery.js, jquery.colorbox.js, and main.js). (2) images – To store all image files (your images, and the images that comes with colorbox plugin), and (3)css – To store all stylesheet files (your own stylesheet, and also the stylesheet that comes with colorbox plugin).
This main folder will also contain 1 html file (you can name it index.html), where you can make a link (an anchor tag that can be clicked), to bring the pop up.
You can follow the steps given by me, in the above tutorial, and it will work fine (Make sure you follow each and every step, and download all the necessary files required for this plugin to work properly). If you are still facing any problem, then please share a link with me so that I can see what is the issue.
February 2, 2011 at 9:30 pm
thanks,
i do not have a third js file, (main.js)
colorbox only comes with two:
jquery.colorbox-min.js
jquery.colorbox.js
i got a sugestion from someone:
“Unless there are a lot of pics, why don’t you just setup a hidden div with your pic links and use the inline method. That way, they never leave the parent page to start.”
this sounds exactly what i like to do, do you know how to set this up,
greetings
harry
February 2, 2011 at 11:02 pm
Hi how to open the color box in top of the page…..
June 15, 2011 at 5:56 pm
Please make sure that your script should inside a document.ready() function.
$(document).ready(function(){
$(“#test-link”).colorbox({width:”60%”, height:”300px”, inline:true, href:”#test-content”});
});
September 20, 2011 at 2:11 pm
Hi,
I just thought I would share my 2 cents in this article. I have on my personal blog a collection Flash components which directly use Colorbox to open bigger images, and even Youtube videos (believe it or not), when I click the images.
I found them at flashxml.net, they are free and just look awesome. You control the images opened in the overlay script via the XML and it works perfectly in WordPress. Didn’t had to edit no code, no nothing, just upload the files, and install the plugin and it works.
You could try taking a look, http://www.flashxml.net/image-scroller.html and just click on one of the images.
November 11, 2011 at 7:33 pm
Here is step by step explaination to add colorbox
http://www.techspark99.com/2012/02/create-modal-subscribe-box-using-jquery.html
February 15, 2012 at 12:05 am
fgdfgdgf
February 25, 2012 at 9:58 pm
Hi,
I use colorbox on my WordPress and it works fine when using Nextgallery.
But I try to use Colorbox to show picures from a folder instead of upload every image into the “Post”, but I cant get it to work.
The following works only to show the specified picture but not all pictures in the folder:
Anyone got a “simple” solution on what I’am missing?
Best Regards
Allan
March 4, 2012 at 3:03 pm
The code dissapeard…Try again:
a href = “http://www.mypage/album/pic1.jpg” rel = “album /”><img class="alignnone" title = "url" src = "http://www.mypage/album/pic1.jpg"
March 4, 2012 at 3:06 pm
Hi, I’m running to different java scripts.
In order to run the script I use:
$(document).ready(function(){
WITH FUNCTIONS IN HERE
});
But they conflict if I have $(document).ready(function() twice… How could I get around this or fix it.
Thanks,
Andrew
June 7, 2012 at 6:51 pm
Hi vikram,
Its a good tut…
I am making website in opencart.
here i want to display subscribe to newsletter option on the front page using colorbox
immediately after website opens.but its not working.Any help is appreciated
Thanks,
Nikhil
July 10, 2012 at 6:00 pm
I always emailed this webpage post page to all my friends,
as if like to read it after that my contacts will too.
January 8, 2013 at 8:18 pm
Excellent blog! Do you have any recommendations for aspiring writers?
I’m planning to start my own site soon but I’m a little lost on everything.
Would you recommend starting with a free platform like WordPress or go for a paid option?
There are so many options out there that I’m totally overwhelmed .. Any recommendations? Cheers!
January 12, 2013 at 12:13 am
whoah this blog is wonderful i like reading your posts. Keep up the good work!
You already know, lots of individuals are hunting round for
this info, you could help them greatly.
January 21, 2013 at 6:20 am
Worked for me! 🙂
If you want to close colorbox (after clicking on a button on modal window, for example), use:
If, for some reason, it did not close the box, let’s go hide it!
$("#cboxOverlay").css("display","none"); $("#colorbox").css("display","none"); // function goes here // we need to restore display default for colorbox! If not, if we try to open it again, it will not show. To it to work, close() must work now! parent.$.fn.colorbox.close(); $("#cboxOverlay").css("display",""); $("#colorbox").css("display","");January 22, 2013 at 2:27 am
I followed the 12 steps description above and my code looks exactly like your but when I click the link nothing happened.
March 20, 2013 at 1:28 am
Great post! Question… Do you use Acesef? Do you like it? I cant figure out which I like better between that and SH404SEF… Both have ups and downs… However having to pay for every plugin for Ace is getting annoying. Your links are pretty clean though, thats why I ask.
May 6, 2013 at 11:56 am
Wow, this tutorial saved my butt this morning. I’ve been trying to trigger colorbox from an onSubmit event and display the html in hidden div. Seems relatively straightfoward but was a bugger until I found this.
May 21, 2013 at 7:22 pm
You really make it seem so easy with your presentation but I find this topic
to be actually something that I think I would never understand.
It seems too complex and extremely broad for me. I am looking forward for your next post, I will try to get the hang of it!
September 3, 2013 at 10:48 am
$(‘#link_content’).colorbox({opacity:0.3});
August 12, 2014 at 6:57 pm
Related posts:
JavaScript Form Validation Script: More features
A Form Design Software that is Quick, Easy and Simple.
How to Submit a Form Using JavaScript
Using JavaScript to reset or clear a form
How to set the value of a form field using Javascript PII
How to set the value of a form field using Javascript PIII
Can JavaScript email a form?
Simfatic Forms Validation: save your time coding
Doing real-time calculations in a form using JavaScript
Using JavaScript to access form objects when there are multiple forms
How to get the value of a form element using JavaScript
HTML Form Tutorial
HTML Form Tutorial Part III : Still More Input Elements
Tagged as: download, javascript form validation, reference, validation
August 12, 2014 at 6:58 pm