Continued from previous series of skinning carousel, this time we will be skinning an image slider with thumbnail carousel. The coolest thing though, we are still using the same jQuery plugin (carouFredSel) but different configuration and skin.
For the skin, we are using this beautiful PSD file called “Little gallery” by Milos Milikic.
According to the design, the jQuery carousel plugin needs to be configured to have:
- Previous and next navigation
- Thumbnail carousel
- Main Image carousel
The right plugin
We like carouFredsel by fred. It allows us to create all different layouts easily. Most importantly, there are many demos and examples on the website for us to fiddling around and find the right carousel configuration. This time, we will use this example – Slideshow with scrolling frid of thumbnails and transform it into something we need.
We won’t go into the details of the Javascript, but this is basically what you’ll need in this tutorial:
$(function() {
/* Attached an unique class name to each thumbnail image */
$('#thumbs .thumb a').each(function(i) {
$(this).addClass( 'itm'+i );
/* add onclick event to thumbnail to make the main
carousel scroll to the right slide*/
$(this).click(function() {
$('#images').trigger( 'slideTo', [i, 0, true] );
return false;
});
});
/* Highlight the first item on first load */
$('#thumbs a.itm0').addClass( 'selected' );
/* Carousel for the main slideshow */
$('#images').carouFredSel({
direction: 'left',
circular: true,
infinite: false,
items: 1,
auto: true,
scroll: {
fx: 'directscroll',
onBefore: function() {
/* Everytime the main slideshow changes, it check to
make sure thumbnail and page are displayed correctly */
/* Get the current position */
var pos = $(this).triggerHandler( 'currentPosition' );
/* Reset and select the current thumbnail item */
$('#thumbs a').removeClass( 'selected' );
$('#thumbs a.itm'+pos).addClass( 'selected' );
/* Move the thumbnail to the right page */
var page = Math.floor( pos / 3 );
$('#thumbs').trigger( 'slideToPage', page );
}
}
});
/* Carousel for the thumbnails */
$('#thumbs').carouFredSel({
direction: 'left',
circular: true,
infinite: false,
items: 3,
align: false,
auto: false,
prev: '#prev',
next: '#next'
});
});
The Blueprint
Always plan first before you started something. The following picture illustrates the plan we have in mind.
The HTML structure
The following is the structure of the HTML code. The thing we have to be careful though, is the a and img tags (for both main and thumbnail carousel). a tag should be on the top of the image, this will enable us to put the “glare” effect on top of the image by using background image in CSS.
<div id="gallery"> <!-- HTML for main carousel --> <div id="main"> <div id="images"> <div class="slide"> <a href=""></a> <img src="images/large/large-image.jpg" alt="Main Image Title" width="400" height="210" /> </div> ...... ...... ...... </div> </div> <!-- HTML for thumbnail carousel --> <div id="thumbs"> <div class="thumb"> <a href="#">Thumbnail Title</a> <img src="images/small/samll-image.jpg" alt="Thumbnail Title" width="72" height="38" /> </div> ...... ...... ...... </div> <!-- Previous and next button --> <a href="#" class="thumbs" id="prev">Previous</a> <a href="#" class="thumbs" id="next">Next</a> </div> <!-- clear float --> <div class="clear"></div>
Skin it up
So we have the following images sliced out from the little gallery psd file. We made the navigation button a CSS sprite with hover effect. For the main and thumbnail glare images, it’s actually a transparent PNG, in the following images we put a black background color to show you how it looks like.
Now we have javascript, html and images ready, it’s time to style it up!
#gallery {
width: 432px;
height: 280px;
position:relative;
margin:0 auto;
}
/* Styling for the main carousel */
#gallery #main {
width:432px;
height:220px;
background: transparent url('images/carousel_shadow.png') no-repeat center bottom;
position:relative;
text-align:center;
}
#gallery #images, #gallery #thumbs {
overflow: hidden;
}
#gallery #images {
width:400px;
height:210px;
margin:0 auto;
position:absolute;
left:16px;
top:0;
}
#gallery #images .slide {
width: 400px;
height:210px;
position:relative;
float:left;
}
#gallery #images .slide a {
display:block;
position:absolute;
top:0;
left:0;
background: transparent url('images/carousel_glare.png') no-repeat 0 0;
width: 400px;
height:210px;
text-indent:-999em;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#gallery #images .slide img {
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
/* styling for the thumbnail carousel */
#gallery #thumbs {
width: 330px;
height:40px;
margin:10px 0 0 73px;
}
#gallery #thumbs .thumb {
width:72px;
height:40px;
float: left;
position:relative;
margin:0 30px 0 0;
}
#gallery #thumbs .thumb img {
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#gallery #thumbs .thumb a {
display:block;
position:absolute;
top:0;
left:0;
background: transparent url('images/carousel_glare_small.png') no-repeat 0 0;
width: 70px;
height:36px;
border:2px solid #ddd;
text-indent:-999em;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#gallery #thumbs .thumb a.selected, #gallery #thumbs .thumb a:hover {
border:2px solid #aaa;
}
/* styling for previous and next button */
#gallery #prev, #gallery #next {
text-indent:-999em;
position: absolute;
display:block;
width:19px;
height:20px;
background: transparent url('images/carousel_nav.png') no-repeat 0 0;
bottom:20px;
}
/* Set the position according to the sprite */
#gallery #prev {
background-position: 0 0;
left: 25px;
}
#gallery #next {
background-position: -19px 0;
right: 25px;
}
#gallery #prev:hover {
background-position: 0 -20px;
}
#gallery #next:hover {
background-position: -19px -20px;
}
#gallery #prev.disabled, #gallery #next.disabled {
display: none !important;
}
Finally…
This will be the final result! The rounded corner of the main and thumbnail carousel are slightly different, but the rest should look identical.
.
This is how to skin an image slider with free psd file. If you want to try it yourself on different psd files, you can find one from our image slider collection. We will be having more tutorial on styling up plugins and user interface. Stay tuned and subscribe to our rss or follow us on twitter. Peace.
