THE JAVA SCRIPT

The main idea of this little thumbnail slider is to be able to use it with any (reasonable) size of thumbnails and to add certain effects to it. So, we will make a plugin which will look as follows:

(function($) {
	$.fn.thumbnailSlider = function(options) {
		var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);
		return this.each(function() {
			...
		});
	};
	$.fn.thumbnailSlider.defaults = {
		speed		: 100, //speed of each slide animation
		easing		: 'jswing', //easing effect for the slide animation
		thumb_width	: 75, //your photos width
		thumb_height: 75, //your photos height
		zoom		: false, //zoom animation for the thumbs
		zoomratio	: 1.3, //multiplicator for zoom (must be > 1)
		zoomspeed	: 15000, //speed of zoom animation
		onClick		: function(){return false;} //click callback
	};
})(jQuery);

Now let’s take a deeper look at the plugin functionality. First, we need to define some variables:

var $this 				= $(this),
	o 					= $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

var $ts_container		= $this.children('.ts_container'),
	$ts_thumbnails		= $ts_container.children('.ts_thumbnails'),
	$nav_elems			= $ts_container.children('li').not($ts_thumbnails),
	total_elems			= $nav_elems.length,
	$ts_preview_wrapper	= $ts_thumbnails.children('.ts_preview_wrapper'),
	$arrow				= $ts_thumbnails.children('span'),
	$ts_preview			= $ts_preview_wrapper.children('.ts_preview');

We also need to calculate some values that we need to set to certain elements. The “ts_thumbnails” container which is our little white frame that holds the list of thumbnails, will have a width composed of the thumbnail width and its border (which is 5 pixels on each side). The height will also contain the height of the little triangle span which is 6 pixels. The top will always be the same, a negative value since we need to “pull it up” to be above the dot list. The left value is calculated by getting the left position of the current dot and subtracting half of the thumbnails width. This will position it at the beginning of the respective dot, so we need to add half of the dot’s width in order really center it correctly above the dot:

/*
calculate sizes for $ts_thumbnails:
width 	-> width thumbnail + border (2*5)
height 	-> height thumbnail + border + triangle height(6)
top		-> -(height plus margin of 5)
left	-> leftDot - 0.5*width + 0.5*widthNavDot
	this will be set when hovering a dot,
	and the default value will correspond to the first nav dot
*/
var w_ts_thumbnails	= o.thumb_width + 2*5,
	h_ts_thumbnails	= o.thumb_height + 2*5 + 6,
	t_ts_thumbnails	= -(h_ts_thumbnails + 5),
	$first_nav		= $nav_elems.eq(0),
	l_ts_thumbnails	= $first_nav.position().left - 0.5*w_ts_thumbnails + 0.5*$first_nav.width();

Now we need to set all those values:

$ts_thumbnails.css({
	width	: w_ts_thumbnails + 'px',
	height	: h_ts_thumbnails + 'px',
	top		: t_ts_thumbnails + 'px',
	left	: l_ts_thumbnails + 'px'
});

Next step is to position the triangle correctly. For calculating the top of the triangle we need the height of the thumb plus its border. The left value will depend on the width of the thumbnail: we take the width plus the border and take half of that, and then we subtract half of the width of the triangle. This will center the little triangle:

/*
calculate the top and left for the triangle/tooltip
top		-> thumb height + border(2*5)
left	-> (thumb width + border)/2 -width/2
*/
var t_arrow	= o.thumb_height + 2*5,
	l_arrow	= (o.thumb_width + 2*5) / 2 - $arrow.width() / 2;
$arrow.css({
	left	: l_arrow + 'px',
	top		: t_arrow + 'px',
});

The list “ts_preview” that holds all the thumbnails, needs a width and we can calculate it by multiplying the width of a thumbnail with the number of total thumbnails:

/*
calculate the $ts_preview width -> thumb width times number of thumbs
*/
$ts_preview.css('width' , total_elems*o.thumb_width + 'px');

Then we set its width and also its height, which will simply be the height of a thumbnail:

$ts_preview_wrapper.css({
	width	: o.thumb_width + 'px',
	height	: o.thumb_height + 'px'
});

Now we will define what happens when we hover a navigation element i.e. a dot. We’ll get the index of the dot to know to which thumbnail item we need to slide to. Then we calculate the left value to which we want to slide the frame to, i.e. the “ts_thumbnails” list item. We also animate the list of thumbnails to the right position which we know because of the current index of the dot.

If the zoom option was chosen, we will increase the width and height of the thumbnail:

$nav_elems.bind('mouseenter',function(){
	var $nav_elem	= $(this),
		idx			= $nav_elem.index();

	/*
	calculate the new left
	for $ts_thumbnails
	*/
	var new_left	= $nav_elem.position().left - 0.5*w_ts_thumbnails + 0.5*$nav_elem.width();

	$ts_thumbnails.stop(true)
				  .show()
				  .animate({
					left	: new_left + 'px'
				  },o.speed,o.easing);				  

	/*
	animate the left of the $ts_preview to show the right thumb
	*/
	$ts_preview.stop(true)
			   .animate({
					left	: -idx*o.thumb_width + 'px'
			   },o.speed,o.easing);

	//zoom in the thumb image if zoom is true
	if(o.zoom && o.zoomratio > 1){
		var new_width	= o.zoomratio * o.thumb_width,
			new_height	= o.zoomratio * o.thumb_height;

		//increase the $ts_preview width in order to fit the zoomed image
		var ts_preview_w	= $ts_preview.width();
		$ts_preview.css('width' , (ts_preview_w - o.thumb_width + new_width)  + 'px');

		$ts_preview.children().eq(idx).find('img').stop().animate({
			width		: new_width + 'px',
			height		: new_height + 'px'
		},o.zoomspeed);
	}		

}).bind('mouseleave',function(){
	//if zoom set the width and height to defaults
	if(o.zoom && o.zoomratio > 1){
		var $nav_elem	= $(this),
			idx			= $nav_elem.index();
		$ts_preview.children().eq(idx).find('img').stop().css({
			width	: o.thumb_width + 'px',
			height	: o.thumb_height + 'px'
		});
	}

	$ts_thumbnails.stop(true)
				  .hide();

}).bind('click',function(){
	var $nav_elem	= $(this),
		idx			= $nav_elem.index();

	o.onClick(idx);
});

And that’s it! Now, let’s take a look at some examples!

THE EXAMPLE

In the DEMO you will see four different examples, we will show you how to apply the last one. For that, we need to set the width and the height of the thumbnails and define some other parameters. We want the image to zoom in when we hover over the dot, so the following parameters are set:

$('#demo4').thumbnailSlider({
	thumb_width	: 174,
	thumb_height: 260,
	speed		: 200,
	zoom		: true,
	zoomspeed	: 10000,
	zoomratio	: 1.7
});

Hope that it is useful for you! Have a good time !

Source: tympanus.net