Creating Image Slider with Thumbnail Carousel
Slideshow or Image Slider with Thumbnail Carousel is also one type of jQuery slideshow with different designs . Previous Tutorial Problogiz making guide divides Create Cool Slide Show jQuery Carousel in Blogger , this time still using the same jQuery plugin caroudFredSel but with configurations and different skins . Image Slider with thumbnails using the Main Page ( main picture ) and thumbnails , which are both shifted automatically. Let's follow the tutor more about Creating Thumbnail Image Carousel slidershow the following .
Image slidershow with Thumbnail Carousel
For this slidershow Image skin using PSD file that you can download below , corresponding slider design ( sources : favbulous.com ) carousel jQuery plugin needs to be configured as follows :
Previous and next navigation
thumbnail carousel
Main Image carousel
Thumbnail CAROUSEL IMAGE SLIDER DEMO
jQuery Plugin
Still using carouFredsel plugin that allows us to create different layouts easily . There are many online demos and samples for us to try and find the right configuration Carousel . This time , we will use the example of Slideshow with thumbnail scrolling ( scroll ) horizontally . For that we need the following javascript :
$ (function ( ) {
/ * Attached an unique class name to each thumbnail image * /
$ ( ' # thumbs . thumb a ' ) . each ( function ( i ) {
$ (this ) . addClass ( ' itm ' + i ) ;
/ * Add an onclick event to make the thumbnail to play
scroll to the right carousel slide * /
$ (this ) . click (function ( ) {
$ ( ' # images ' ) . triggers ( ' slideTo ' , [ i , 0 , true ] ) ;
return false ;
} ) ;
} ) ;
/ * Highlight the first item on first load * /
$ ( ' # thumbs a.itm0 ' ) . addClass ( 'selected ' ) ;
/ * Carousel for the play 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
and the make sure the thumbnail page are displayed Correctly * /
/ * Get the current position * /
var pos = $ (this ) . triggerHandler ( ' currentPosition ' ) ;
/ * Reset thumbnails and select the current 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 ' ) . triggers ( ' slideToPage ' , page ) ;
}
}
} ) ;
/ * Carousel for the thumbnails * /
$ ( ' # thumbs ' ) . carouFredSel ( {
direction : ' left' ,
circular : true ,
infinite : false ,
items : 3 ,
align: false ,
auto : false ,
prev : ' # prev ' ,
next : ' # next '
} ) ;
} ) ;
HTML structure
Noteworthy is the HTML markup tags and <img> <a> to play or thumbnail carousel , <a> tag must be in a position above ( top ) from the image . So lets give the effect of " glare " or sparkling on each image .
<div id="gallery">
< ! - HTML for the 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 the 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 >
PSD File
There are a couple of little gallery PSD file below which can be used as a cover ( skin ) Slideshow . Css sprite for the navigation buttons with hover effect . To picture the effect of glare ( sparkling ) on the main image and the thumbnail is actually a transparent PNG file , the example below I give a black background to be invisible to your image sparkle . Here's the file that you can copy the image url and replace the background later in the CSS .
carousel_glare.png
carousel_glare_small.png
carousel_nav.png
carousel_shadow.png
CSS
Once we 've had Javascript , Html , and the cover image above , it's time to style for the slideshow , the following CSS code :
# gallery {
width: 432px ;
height: 280px ;
position: relative ;
margin : 0 auto ;
}
/ * Styling for the main carousel * /
# gallery # main {
width: 432px ;
height: 220px ;
background: transparent 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 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 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 buttons * /
# gallery # prev , # gallery # next {
text - indent : - 999em ;
position: absolute ;
display: block ;
width: 19px ;
height: 20px ;
background: transparent no-repeat 0 0 ;
bottom : 20px ;
}
/ * Set the position According to the sprites * /
# 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 ;
}
# # prev.disabled gallery , # gallery # next.disabled {
display: none ! important;
}
Installing Image Slider with Thumbnail Carousel in Blogger
The same pace with the previous article How to Make a Slide Show jQuery Carousel ( you can see back for more details) . The first of the jQuery library and put carouFredSel jquery - plugin below right before the closing < / head> .
<script type="text/javascript" src="https://problogizjs.googlecode.com/files/jquery.carouFredSel-5.2.3-packed.js"> < / script >
JQuery library for no ditemplate if you can use the latest jQuery jquery - 1.9.1.min.js , if there are other versions do not install anymore skip .
The second step , copy the CSS code above and put it right before the closing ] ] > < / b : skin>
The third step , if you want this slidershow sebgai used under Title Blog widget , follow these steps :
Choose Blogger Layout > Add Gadget > choose HTML / JavaScript > paste all the code below > Save
HTML code carouFredSel + plugin :
<div id="gallery">
<div id="main">
<div id="images">
<div class="slide">
<a href="#"> < / a>
<img alt="" width="400" height="210" /> src="http://favbulous.com/demo/style-a-image-slider/images/large/walle.jpg"
< / div >
<div class="slide">
<a href="#"> < / a>
<img alt="" width="400" height="210" /> src="http://favbulous.com/demo/style-a-image-slider/images/large/toystory.jpg"
< / div >
<div class="slide">
<a href="#"> < / a>
<img alt="" width="400" height="210" /> src="http://favbulous.com/demo/style-a-image-slider/images/large/up.jpg"
< / div >
<div class="slide">
<a href="#"> < / a>
<img alt="" width="400" height="210" /> src="http://favbulous.com/demo/style-a-image-slider/images/large/nemo.jpg"
< / div >
< / div >
< / div >
<div id="thumbs">
<div class="thumb">
<a href="#"> < / a>
<img alt="" src="http://favbulous.com/demo/style-a-image-slider/images/small/walle.jpg" width="72" height="38" />
< / div >
<div class="thumb">
<a href="#"> < / a>
<img alt="" src="http://favbulous.com/demo/style-a-image-slider/images/small/toystory.jpg" width="72" height="38" />
< / div >
<div class="thumb">
<a href="#"> < / a>
<img alt="" src="http://favbulous.com/demo/style-a-image-slider/images/small/up.jpg" width="72" height="38" />
< / div >
<div class="thumb">
<a href="#"> < / a>
<img alt="" src="http://favbulous.com/demo/style-a-image-slider/images/small/nemo.jpg" width="72" height="38" />
< / div >
< / div >
<a class="thumbs" href="#" id="prev"> Previous < / a>
<a class="thumbs" href="#" id="next"> Next < / a>
< / div >
<div class="clear">
< / div >
<script type="text/javascript">
$ (function ( ) {
/ * Attached an unique class name to each thumbnail image * /
$ ( ' # thumbs . thumb a ' ) . each ( function ( i ) {
$ (this ) . addClass ( ' itm ' + i ) ;
/ * Add an onclick event to make the thumbnail to play
scroll to the right carousel slide * /
$ (this ) . click (function ( ) {
$ ( ' # images ' ) . triggers ( ' slideTo ' , [ i , 0 , true ] ) ;
return false ;
} ) ;
} ) ;
/ * Highlight the first item on first load * /
$ ( ' # thumbs a.itm0 ' ) . addClass ( 'selected ' ) ;
/ * Carousel for the play 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
and the make sure the thumbnail page are displayed Correctly * /
/ * Get the current position * /
var pos = $ (this ) . triggerHandler ( ' currentPosition ' ) ;
/ * Reset thumbnails and select the current 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 ' ) . triggers ( ' slideToPage ' , page ) ;
}
}
} ) ;
/ * Carousel for the thumbnails * /
$ ( ' # thumbs ' ) . carouFredSel ( {
direction : ' left' ,
circular : true ,
infinite : false ,
items : 3 ,
align: false ,
auto : false ,
prev : ' # prev ' ,
next : ' # next '
} ) ;
} ) ;
< / script >
image source : favbulous.com
Done ! !