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:
- the plugin JavaScript file,
jquery.colorbox-min.js - the plugin CSS file,
colorbox.css - 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.
awesome...
this is one great lightbox effect.
instead of showing images, can i show content as slide show ??