jQuery: Colorbox gallery tutorial

Colorbox is a powerful jQuery plugin for creating image effects based on the popular Lightbox effect. In its essence, it's a simple wrapper that you can call on the wrapper links of your images. Such links should contain the path to your full-sized image, while the images within them are usually thumbnail images. Let's see a practical example of a basic image gallery enhanced with Colorbox.

We have the following markup:

<div id="gallery">
	<a href="jquery-colorbox-gallery/img1.jpg"><img src="jquery-colorbox-gallery/img1-tn.jpg" alt="" /></a>
	<a href="jquery-colorbox-gallery/img2.jpg"><img src="jquery-colorbox-gallery/img2-tn.jpg" alt="" /></a>
	<a href="jquery-colorbox-gallery/img3.jpg"><img src="jquery-colorbox-gallery/img3-tn.jpg" alt="" /></a>
	<a href="jquery-colorbox-gallery/img4.jpg"><img src="jquery-colorbox-gallery/img4-tn.jpg" alt="" /></a>
	<a href="jquery-colorbox-gallery/img5.jpg"><img src="jquery-colorbox-gallery/img5-tn.jpg" alt="" /></a>
	<a href="jquery-colorbox-gallery/img6.jpg"><img src="jquery-colorbox-gallery/img6-tn.jpg" alt="" /></a>
	<a href="jquery-colorbox-gallery/img7.jpg"><img src="jquery-colorbox-gallery/img7-tn.jpg" alt="" /></a>
	<a href="jquery-colorbox-gallery/img8.jpg"><img src="jquery-colorbox-gallery/img8-tn.jpg" alt="" /></a>

In the head section we put a reference to the main CSS file of Colorbox:

<link rel="stylesheet" href="jquery-colorbox-gallery/colorbox.css" type="text/css" media="screen" />

This stylesheet must be put in the same directory where the images directory of Colorbox is placed. Then you have to reference the Colorbox script, just after the jQuery library:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>

Finally, we can use Colorbox directly:

$(function() {

  $('a', '#gallery').colorbox();


You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.