jQuery: a slideshow with ColorBox

Creating an image slideshow with the jQuery ColorBox plugin is incredibly simple. All you need to do is to make some preparatory work on your pages by referencing the main plugin file and its dependencies. Let's see how.

ColorBox setup

After downloading the plugin, you should have the following assets:

  1. the plugin JavaScript file, jquery.colorbox-min.js
  2. the plugin CSS file, colorbox.css
  3. the CSS image directory, images.

First, you have to put the CSS file and its image directory in the same folder. Then you can include such CSS file as any other CSS file of your page:

<head>
<link rel="stylesheet" href="path/colorbox.css" type="text/css" media="screen" />
</head>

Then you have to reference the main JavaScript file, just after the jQuery library:

<body>
<script type="text/javascript" src="path/jquery.min.js"></script>
<script type="text/javascript" src="path/jquery.colorbox-min.js"></script>
</body>

The markup

ColorBox groups images together using the rel attribute of their parent link, so you need to take this into account when preparing our slideshow:

<ul id="gallery">
 <li>
   <a href="1.jpg" rel="slideshow" title="Image 1">
     <img src="jquery-colorbox/pics/1.jpg" alt="" />
   </a>
 </li>
 <!--more images-->
</ul>

Also make sure to specify a title attribute on each link because this attribute will be turned by ColorBox into the image caption.

The CSS styles

Only the very first image must be visible, so we have to set our CSS styles accordingly:

#gallery {
 width: 300px;
 height: 200px;
 margin: 0 auto;
 padding: 0;
 overflow: hidden;
 position: relative;
 list-style: none;
}

#gallery li {
 width: 300px;
 height: 200px;
}

#gallery li a {
 width: 100%;
 height: 100%;
 display: block;
}

#gallery li a img {
 display: block;
 width: 100%;
 height: 100%;
}

Running the slideshow

To make everything work, you need only one single jQuery statement:

$(function() {

  $('a[rel=slideshow]', '#gallery').colorbox({slideshow: true});

});

This is only a basic implementation, but you can find much more on the plugin's documentation page. You can see the demo below.

Demo

Live demo

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

2 thoughts on “jQuery: a slideshow with ColorBox”

Leave a Reply

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