How to create a Feature Article slide show with thumbnails and indicator

Under: Feature Articles,jQuery 30 comments

Development • featured • Gallery • JQuery • Slide show • Tutorial
Follow responses leave a responseTrackback

I am a regular visitor of tutorial 9 among other popular design sites. I really love their gallery on the front page so I tried to figure out how they did it or How I can do it maybe in some other ways. I also like watch football (soccer to Americans) so Goal.com is my favorite site too. They also got a news slide show on front page even with better features than tutorial9′s. You can also check out previous post about currently available slide show/gallery scripts .

slideshow on Goal.com

Divs Explained

feature-gallery-tutorial

Here is how I do the slide show similar to theirs.Two jQury plugins are needed: jCarousel and jQuery cycle

First of all, the features I want to have:

Not to manually resize thumbnails
Be able to display photos with different size and ratio
Auto scroll with thumbnail indication
Manually scroll though thumbnails
Sliding effect with easing animation instead of fading

Here is the Demo

You can also download it

This is how I did it:

Header:

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script>
<script src="js/cycle.js" type="text/javascript"></script>
<script src="js/gallery.js" type="text/javascript"></script>
//your future js file

Slide show with jQuery cycle. According to JQuery cycle’s intermedia level 2 tutorial, having a slide show with pager and auto scroll is easy. Here is the HTML code:

Use DIV to hold your images.
Give your gallery a name- featured gallery.
Give images class ‘change’ for resizing with CSS

<div id=”feature_gallery”>
<div class=”bigimg” title=”http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg” id=”piknown printer took a galley of 1?> <img src=”http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg” class=”change” ></div>
<div class=”bigimg” title=”http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg” id=”picLorem Ipstext of tnpsum hadu typa type spec”> <img src=”http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg” class=”change” ></div>
<div class=”bigimg” title=”http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg” id=”pum is simply dummy 3?> <img src=”http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg” class=”change” ></div>
<div class=”bigimg” title=”http://farm4.static.flickr.com/3270/2694066431_009890dc49_o.jpg” id=”picg and typesetting industry. Lorem I 41?> <img src=”http://farm4.static.flickr.com/3270/2694066431_009890dc49_o.jpg” class=”change”></div>
<div class=”bigimg” title=”http://farm3.static.flickr.com/2053/2163474742_76d766fcfe_o.jpg” id=”ps been the industry’s standard 5?> <img src=”http://farm3.static.flickr.com/2053/2163474742_76d766fcfe_o.jpg” class=”change”></div>
<div class=”bigimg” title=”http://farm1.static.flickr.com/11/16167000_61729d3678_o.jpg” id=”picmmy text ever since the 1500s, when an un 6?> <img src=”http://farm1.static.flickr.com/11/16167000_61729d3678_o.jpg” class=”change”></div>
<div class=”bigimg” title=”http://farm4.static.flickr.com/3616/3429252806_7780e14125_o.jpg” id=”pihe printinpsum he and scrambled it to make ae 1?> <img src=”http://farm4.static.flickr.com/3616/3429252806_7780e14125_o.jpg” class=”change”></div>
<div class=”bigimg” title=”http://farm4.static.flickr.com/3337/3426057461_a4c7503e6f_o.jpg” id=”pihe printi1?> <img src=”http://farm4.static.flickr.com/3337/3426057461_a4c7503e6f_o.jpg” class=”change”></div>
<div class=”bigimg” title=”http://farm3.static.flickr.com/2062/2083550640_7545962dc7_o.jpg” id=”picture last one”> <img src=”http://farm3.static.flickr.com/2062/2083550640_7545962dc7_o.jpg” class=”change”></div>
<div id=”output”></div>
</div>

The JavaScript for jQuery Cycle:

Wrapall bigimgs.
Prepend ul named feature_gallery_pager before all bigimgs.
Define scroll effect and time

$('#feature_gallery .bigimg').wrapAll('
<div class="bigimgs">').parents('#feature_gallery').prepend('
<ul id="feature_gallery_pager" class="menu">').cycle({
fx:'scrollLeft',
easing: 'swing',
inDelay:    250,
drop:       40,
timeout:    5000,
pause:      true,
 
slideExpr: '.bigimg', //slide name
pager:      '#feature_gallery_pager'//pager name
}
 
});</ul>
</div>

I also want to have the caption or related text displayed. Then we need a call back function. There are two choices. You can use onBefore or onAfter. There isn’t too much difference.

Thebefore option specifies the name of the callback function to be invoked
immediately before a slide transition. The after option specifies the name
of the callback method to be invoked at the end of a slide transition.

I will just use before.Also I stored captions or related texts in id attribute. You can always use somthing else.
```
$('#feature_gallery .bigimg').wrapAll('
<div class="bigimgs">').parents('#feature_gallery').prepend('
<ul id="feature_gallery_pager" class="menu">').cycle({
fx:'scrollLeft',
easing: 'swing',
inDelay:    250,
drop:       40,
timeout:    5000,
pause:      true,
before:  onBefore,//add call back function
slideExpr: '.bigimg',
pager:      '#feature_gallery_pager'
}
});    function onBefore() {
$('#output').html("Scrolling image:" + this.id);
}</ul>
</div>
```
Now we need to get thumbnails from bigimgs’ url and shrink them. Add this code after pager name and define width and height for class thumbnail. What it does is to get src from bigimg’s title attribute. Now you understand why I put the image url in title attribute of its div, you can always use other attributes. Why not get it from src? cause it does not work, and I have seen many people stuck here. One guy in a forum used a whole page of code to get thumnail url. I think I just gonna take the shorcut.
```
 pagerAnchorBuilder: function(idx, slide) { 
 
            return '
	<li><a href="#"><img class="thumb" src="'+slide.title+'" alt="" /></a></li>
';
        }
```
Put thumb nails in jCarousel, so we can scroll them.The thumbnails are called feature_gallery_pager in jQuery cycle.
```
$(function() {
jQuery('#feature_gallery_pager').jcarousel({
scroll:1
});
});
```

Style with CSS:

Define bigimg change class with width or height so they are not constrained.
class .jcarousel-item ‘s width need to be slightly smaller than it really is.
the active slide is called a.activeSlide

body {
font:12px;
}
a img {
border:none;
}
.jcarousel-container {
position: relative;
clear:both;
width:510px;
margin:10px auto 0 auto;
padding:0 40px;
}
.jcarousel-clip {
z-index: 2;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.jcarousel-item {
float: left;
list-style: none;
/* We set the width/height explicitly. No width/height causes infinite loops. */
 
width:80px;
}/**
*  Horizontal Buttons
*/
.jcarousel-next-horizontal {
position:absolute;
top:10px;
right:5px;
width: 32px;
height: 32px;
cursor: pointer;
background:  transparent url(jcarousel_next.png) no-repeat 0 0;
}
.jcarousel-next-horizontal:hover{
background-position: -32px 0;
}
.jcarousel-next-horizontal:active{
background-position: -64px 0;
}
.jcarousel-next-disabled-horizontal, .jcarousel-next-disabled-horizontal:hover, .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-prev-horizontal {
position:absolute;
top:10px;
left:5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(jcarousel_prev.png) no-repeat 0 0;
}
.jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-prev-disabled-horizontal, .jcarousel-prev-disabled-horizontal:hover, .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
#feature_gallery{
height:500px;
width:600px;
margin:auto;
display:block;
background-color: #F2F2F2;
padding: 10px;
border: 1px solid #DADADA;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
ul#feature_gallery_pager{
display:block;
margin:auto;
overflow:hidden;
height:65px;
}
#feature_gallery ul.menu li a:hover{//you can define sth here
}
ul#feature_gallery_pager li a{
overflow:hidden;
width:80px;
height:60px;
padding:2px;
float:left;
display:block;
}
ul#feature_gallery_pager li{
margin:0 2px;
padding:0 0 10px 0;
}
#feature_gallery ul.menu a.activeSlide{
background:url(arrow.png) no-repeat;
}
#feature_gallery .bigimgs{
overflow:hidden;
background-color:#000;
height:330px;
width:500px;
border:2px solid #fff;
position:relative;
margin:0 auto;
}
#feature_gallery img.change{
width:500px;
position:relative;
}
#feature_gallery img.thumb{
width:80px;
height:51px;
}
#output{
width:500px;
margin:1em auto;
display:block;
clear:both;}

Make the js external:

// DOM Loaded
$(function(){ 
 
    //init js styles
    $('body').addClass('hasJS'); 
 
    // homepage cycles
    $('#feature_gallery .bigimg').wrapAll('
<div class="bigimgs">').parents('#feature_gallery').prepend('
<ul id="feature_gallery_pager" class="menu">').cycle({
        fx:'scrollLeft',
        easing: 'swing',
        inDelay:    250,
        drop:       40,
        timeout:    5000,
        pause:      true,
		before:  onBefore,
        slideExpr: '.bigimg',
        pager:      '#feature_gallery_pager',
        pagerAnchorBuilder: function(idx, slide) { 
 
            return '
	<li><a href="#"><img class="thumb" src="'+slide.title+'" alt="" /></a></li>
';
        } 
 
    });
 
$(function() {
    jQuery('#feature_gallery_pager').jcarousel({
        scroll:1
    });
});
 
function onBefore() {
    $('#output').html("Scrolling image:
" + this.id);
} 	
 
});</ul>
</div>

(optional) If your photos’ size are very different you can define the image change class like this

.change{width:600px;//make it bigger than your frame so you can move it position: relative; top:-30px;left-40px}

Next, I will show you how to integrate it with WordPress.

Design-Notes

Popular Posts

How to create a Feature Article slide show with thumbnails and indicator