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> </div>
In the head section we put a reference to the main CSS file of Colorbox:
<head> <link rel="stylesheet" href="jquery-colorbox-gallery/colorbox.css" type="text/css" media="screen" /> </head>
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> </body> </html>
Finally, we can use Colorbox directly:
$(function() {
$('a', '#gallery').colorbox();
});
You can see the demo below.