Setting up the carousel thumbnail slideshow will be the trickiest thing we've done with jCarousel yet. But don't worry, we'll take it one step at a time.
- I bet you can guess how we're going to get started, can't you? That's right, by setting up our simple HTML file and associated files and folders, just as we did in Chapter 1, Designer, Meet jQuery. In this case, we want just a simple list of thumbnails that are linked to the full-size version of the image. And we're going to wrap that up in a
<div>for styling purposes. Here's what my list looks like:<div class="jcarousel-skin-slideshow"> <ul id="thumb-carousel"> <li><a href="images/600/Switzerland.jpg"><img src="images/small/Switzerland.jpg" alt="Switzerland"/></a></li> <li><a href="images/600/CostaRica.jpg"><img src="images/small/CostaRica.jpg" alt="Costa Rica"/></a></li> <li><a href="images/600/Canada.jpg"><img src="images/small/Canada.jpg" alt="Canada"/></a></li> ... </ul> </div>
I've got twelve items in my list total, and they're all marked up identically.
- Next, we'll write the CSS for the carousel. It's a custom design, so we won't be including one of the stylesheets provided with jCarousel. Open up your
styles.cssfile and add the following CSS:.jcarousel-skin-slideshow .jcarousel-container { } .jcarousel-skin-slideshow .jcarousel-container-horizontal { width:760px;padding:0 48px; } .jcarousel-skin-slideshow .jcarousel-clip { overflow:hidden; } .jcarousel-skin-slideshow .jcarousel-clip-horizontal { width:760px;height:75px; } .jcarousel-skin-slideshow .jcarousel-item { width:100px;height:75px; } .jcarousel-skin-slideshow .jcarousel-item-horizontal { margin-left:0;margin-right:10px; } .jcarousel-skin-slideshow .jcarousel-item-placeholder { background:#fff;color:#000; } .jcarousel-skin-slideshow .jcarousel-next-horizontal { position:absolute;top:0;right:0;width:38px;height:75px;cursor:pointer;background:transparent url(images/arrow-right.png) no-repeat 0 0; } .jcarousel-skin-slideshow .jcarousel-next-horizontal:hover, .jcarousel-skin-slideshow .jcarousel-next-horizontal:focus { background-position:0 -75px; } .jcarousel-skin-slideshow .jcarousel-next-horizontal:active { background-position: 0 -75px; } .jcarousel-skin-slideshow .jcarousel-prev-horizontal { position:absolute;top:0;left:0;width:38px;height:75px;cursor:pointer;background:transparent url(images/arrow-left.png) no-repeat 0 0; } .jcarousel-skin-slideshow .jcarousel-prev-horizontal:hover, .jcarousel-skin-slideshow .jcarousel-prev-horizontal:focus { background-position: 0 -75px; } .jcarousel-skin-slideshow .jcarousel-prev-horizontal:active { background-position: 0 -75px; }I've created an image sprite containing the images for my next and previous buttons and that's what's being used as the background image for those. The rest of this should look familiar—setting up the appropriate sizes for the individual items and the carousel itself.
- Now, we'll attach the jCarousel plugin at the bottom of the document, in between jQuery and your
scripts.jsfile:<script src="scripts/jquery.js"></script> <script src="scripts/jquery.jcarousel.min.js"></script> <script src="scripts/scripts.js"></script>
- Open up your
scripts.jsfile and we'll get the JavaScript started by getting our thumbnail carousel up and running. Inside a document ready statement, select the carousel and call thejcarousel()method as follows:$(document).ready(function(){ $('#thumb-carousel').jcarousel({ scroll: 6, wrap: 'circular' }); });We've assigned a value of
'circular'to thewrapkey—that means the carousel will have neither beginning nor end—it will just continuously wrap around as the site visitor scrolls through.
The continuous wrapping is nice — our site visitors will be able to click either the forward or back carousel buttons no matter where they are, which feels a little friendlier than disabled buttons. However, continuous scrolling can make it a little more difficult for our site visitors to keep track of where they are in the carousel. For that reason, we've set the scroll to 6, even though our carousel is capable of displaying seven images.
Let's say our site visitor is looking at our carousel and there's a photo of a gorgeous beach scene in the first slot in the carousel. The site visitor clicks the previous button and that gorgeous beach scene slides over to fill the last slot in the carousel. Seeing that same image in a new position helps to communicate what just happened and ensures our site visitors that they didn't miss anything.
What just happened?
We followed steps similar to what we've done in earlier jCarousel examples. Set up our HTML, wrote some CSS styles for the carousel, and then used jQuery to select the list of thumbs and called the jCarousel() method. Now, let's get more advanced and add a slideshow to our carousel.
Slideshow
Now that we've got our simple carousel set up and styled the way that we'd like, let's dive into adding the crossfade slideshow feature.