Codrops » slider

Elastislide – A Responsive jQuery Carousel Plugin

Mary Lou — Mon, 12 Sep 2011 17:02:45 +0000

With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. This and other options are part of Elastislide’s properties.

Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.

The images are by Karrie Nodalo and you can find her awesome photos here:
Karrie Nodalo’s Photostream on Flickr
Her images are licensed under the Attribution 2.0 Generic License.

The HTML Structure

The Markup for the carousel consists of a main wrapper that will adjust to the width of any fluid container you put it into. (If you put the carousel in a container with a fixed width, it will not adapt. So make sure that your container has a fluid layout.)
The carousel element will have an unordered list with linked images:

Use your preferred ID and call the plugin like this:

$('#carousel').elastislide({
	imageW 	: 180
});

where imageW is the width of the thumbnails.

Options

Elastislide has the following default options:

speed		: 450,
// animation speed

easing		: '',
// animation easing effect

imageW		: 190,
// the images width

margin		: 3,
// image margin right

border		: 2,
// image border

minItems	: 1,
// the minimum number of items to show.
// when we resize the window, this will
// make sure minItems are always shown
// (unless of course minItems is higher
// than the total number of elements)

current		: 0,
// index of the current item
// when we resize the window,
// the plugin will make sure that
// this item is visible 

onClick		: function() { return false; }
// click item callback
// Example of how to get the index
// of the clicked element:
/*
$('#carousel').elastislide({
    onClick  :  function( $item ) {
        alert( 'The clicked item´s index is ' + $item.index() )
    }
});
*/

It is also possible to dynamically add new items to the carousel. The following is an example on how to achieve that:

var $items	= $('
');
$('#carousel').append($items).elastislide( 'add', $items );

I hope you like this plugin and find it useful!

View demo Download source

Slicebox – A fresh 3D image slider with graceful fallback

Pedro Botelho — Mon, 05 Sep 2011 16:40:59 +0000

View demo Download source

With the CSS3 3D transformations we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object. In case the browser does not support 3D transformations, a simple slider will be used as fallback.

Please note that you can only see the cool 3d effect of Slicebox in a browser that supports those CSS3 properties (currently Chrome and Safari).

The images used in the demos are by Rick Harris. They are licensed under the Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0).

Usage

In order to use Slicebox, put your images in a container with the class “sb-slider”:

Then you can call the plugin with

$('#sb-slider').slicebox();

Options

Slicebox comes with a set of options that you can adjust for various types of effects:

orientation			: 'v',
// (v)ertical or (h)orizontal.

perspective			: 1200,
// -webkit-perspective value.

slicesCount			: 1,
// needs to be an odd number between 1 and 15
// (if you want the limit higher, change the _validate function).

disperseFactor		: 0,
// each slice will move x pixels left / top (depending on orientation).
// The middle slice doesn't move.
// The middle slice's neighbors will move disperseFactor pixels.

colorHiddenSides	: '#222',
// color of the hidden sides.

sequentialRotation	: false,
// the animation will start from left to right.
// The left most slice will be the first one to rotate.

sequentialFactor	: 0,
// if sequentialRotation is true this will
// be the interval between each rotation in ms.

speed3d				: 800,
// animation speed3d.

speed				: 600,
// fallback speed. You might want to set
// a different speed for the fallback animation...

fallbackEasing		: 'easeOutExpo',
// fallback easing.

slideshow			: false,
// if true the box will be rotating automatically.

slideshowTime		: 2000
// interval for the slideshow in ms.

Check out each example and you will see how to create different behaviors with the options.

Hope you find it useful, feedback is welcome!

View demo Download source

Circular Content Carousel with jQuery

Mary Lou — Tue, 16 Aug 2011 16:19:39 +0000

View demo Download source

Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

The beautiful animal icon set in the ZIP file are by Cyberella and they are licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) License.

The HTML Structure

The structure consists of a main container and a wrapper for the items. Each item contains


	
		
			
				
				Stop factory farming
				
					“
					Some text...
				
					more...
			
			
				
					Animals are not commodities
					close
					
						Some more text...
					
					
						Read more
						Share this
						Become a member
						Donate
					
				
			
		
		
			...
		
		...

The initial view of the content carousel:

When we click on “more…”, another content area will slide out and move the respective item to the left:

The default options are the following:

$('#ca-container').contentcarousel({
	// speed for the sliding animation
	sliderSpeed		: 500,
	// easing for the sliding animation
	sliderEasing	: 'easeOutExpo',
	// speed for the item animation (open / close)
	itemSpeed		: 500,
	// easing for the item animation (open / close)
	itemEasing		: 'easeOutExpo',
	// number of items to scroll at a time
	scroll			: 1
});

We hope you enjoy this simple carousel and find it useful!

View demo Download source

Content Rotator with jQuery

Mary Lou — Fri, 29 Jul 2011 15:44:03 +0000

View demo Download source

Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides.

The beautiful images are by Andrey & Lili. The images are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.

We also use the jQuery Mousewheel Plugin by Brandon Aaron and the jScrollPane Plugin by Kevin Luck.

Examples

We have two examples, one with autoplay and one without:

For the HTML structure we will have a main container, the content wrapper and the container for the thumbs. Each cr-content-container needs an ID assigned which we will reference in each thumb with data-content:


	
		
			
			
				
					The slide title
					
						Some sub-title
						 read more →
					
				
				
					Some text here...
				
			

		

		
			...
		

		...
	

	
		
			
			The slide title
		
		
			
			Another slide title
		
		...

The default options are the following:

$('#cr-container').crotator({
	// slideshow on
	autoplay 			: false,
	// slideshow interval
	slideshow_interval 	: 3000,
	// if true the thumbs will be shown initially
	openThumbs			: true,
	// speed that the thumbs are shown / hidden
	toggleThumbsSpeed	: 300
});

We hope you like this little content rotator and find it useful!

View demo Download source

Rotating Image Slider with jQuery

Mary Lou — Thu, 28 Apr 2011 15:32:06 +0000

View demo Download source

In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.

We’ll use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control.

The beautiful photos are by Andrew and Lili and you can see their Behance profile here:
http://www.behance.net/AndrewLili
The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.

Allrighty! Let’s start with the HTML!

The Markup

First, we will wrap all our slider elements in a wrapper with the class “rm_wrapper”:

...

Inside of that wrapper we will have a container for the actual slider list, some mask and corner elements, the heading and a hidden div that will contain all the image sets:


	
		
			
		
		
			
		
		
			
		
		
			
		
	
	
	
	
	
	Fashion Explosion 2012

So the unordered lists will have the first set of four images where each list element has some data attributes for the image sets and the rotation degree. We will use that data to know which images come next and how much each image should be rotated.

The mask and corner divs will be absolute elements that we will place on top of the slider, slightly rotated in order to cover some areas. Since we will use the same background color for these elements like the body’s background color, we will create the illusion of the images being shaped in a certain way.

Then we’ll add the elements for the navigation and the autoplay controls:


	
	


	Play
	Pause

Let’s take a look at the CSS.

The CSS

First, we’ll reset some styles and define the properties for the body. (Remember, if we would have another background color, we would want to change the background and border colors of some of the elements in our slider, too.)

@import url('reset.css');
body{
	background:#f0f0f0;
	color:#000;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:16px;
}
a{
	color:#000;
	text-decoration:none;
}
h1{
	padding:10px;
	margin:20px;
	font-size:40px;
	text-transform:uppercase;
	text-shadow:0px 0px 1px #fff;
	color:#333;
	background:transparent url(../images/line.png) repeat-x bottom left;
}

The main wrapper will have the following style:

.rm_wrapper{
	width:1160px;
	margin:0 auto;
	position:relative;
}

The container for the slider will have any overflow hidden, which will help shaping our slider since we will cut off the outer sides of it:

.rm_container{
	width:1050px;
	overflow:hidden;
	position:relative;
	height:530px;
	margin:0 auto;
}

The heading will have the following style:

.rm_container h2{
	background:transparent url(../images/lines.png) repeat top left;
	padding:10px 30px;
	position:absolute;
	bottom:170px;
	right:0px;
	color:#000;
	font-size:36px;
	text-transform:uppercase;
	text-shadow:1px 0px 1px #fff;
}

Let’s define the width for the ul to be bigger than the container since we want to make the list element float next to each other:

.rm_container ul{
	width:1170px;
}

By giving a negative left margin and a thick border to the list element, we will overlap the images and cut off the right sides so that we create our asymmetrical shapes by rotating the elements then. The border color will be the same like the background color of the body (or the container).

.rm_container ul li{
	float:left;
	margin-left:-80px;
	position:relative;
	overflow:hidden;
	width:310px;
	height:465px;
	border:30px solid #f0f0f0;
	border-width:50px 30px 0px 30px;
	background-color:#f0f0f0;
}

We’ll position the images absolutely:

.rm_container ul li img{
	position:absolute;
	top:0px;
	left:0px;
}

In the following we will style the mask and the corner elements. They will be all positioned absolutely and we’ll give them the grey background color. By rotating them, we’ll make the images to appear as being “shaped”:

.rm_mask_right, .rm_mask_left{
	position: absolute;
	height: 110px;
	background: #f0f0f0;
	width: 530px;
	bottom: -30px;
	left: 0px;
	-moz-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	transform:rotate(-3deg);
}
.rm_mask_right{
	left:auto;
	right:0px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{
	background: #f0f0f0;
	position:absolute;
	width:200px;
	height:100px;
	bottom:0px;
	left:-65px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.rm_corner_right{
	left:auto;
	right:-65px;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

The navigation elements will be placed to the left and right of the main container:

.rm_nav a{
	position:absolute;
	top:200px;
	width:38px;
	height:87px;
	cursor:pointer;
	opacity:0.7;
}
.rm_nav a:hover{
	opacity:1.0;
}
.rm_nav a.rm_next{
	background:transparent url(../images/next.png) no-repeat top left;
	right:0px;
}
.rm_nav a.rm_prev{
	background:transparent url(../images/prev.png) no-repeat top left;
	left:0px;
}

The pause/play control will be placed to the top left of the main container:

.rm_controls{
	position:absolute;
	top:0px;
	left:-40px;
	height:20px;
}
.rm_controls a{
	cursor:pointer;
	opacity:0.7;
	padding-left:24px;
	font-size:16px;
	text-transform:uppercase;
	height:20px;
	float:left;
	line-height:20px;
}
.rm_controls a:hover{
	opacity:1.0;
}
.rm_controls a.rm_play{
	display:none;
	background:transparent url(../images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{
	background:transparent url(../images/pause.png) no-repeat center left;
}

And that’s all the style! Let add the spice!

The JavaScript

The main idea for the slider functionality is to add another image before the current one with a slightly increased rotation degree than the current item. Then we will animate the rotation and make the new images appear.
So let’s start by caching some elements and checking if we are dealing with a special needs browser in order to deal with some issues:

//our 4 items
var $listItems 		= $('#rm_container > ul > li'),
	totalItems		= $listItems.length,

	//the controls
	$rm_next		= $('#rm_next'),
	$rm_prev		= $('#rm_prev'),
	$rm_play		= $('#rm_play'),
	$rm_pause		= $('#rm_pause'),

	//the masks and corners of the slider
	$rm_mask_left	= $('#rm_mask_left'),
	$rm_mask_right	= $('#rm_mask_right'),
	$rm_corner_left	= $('#rm_corner_left'),
	$rm_corner_right= $('#rm_corner_right'),

	//check if the browser is <= IE8
	ieLte8			= ($.browser.msie && parseInt($.browser.version) <= 8),

Then we will define our main function:

RotateImageMenu	= (function() {
...
})();

RotateImageMenu.init();

And then we define the following in our function:

	//difference of animation time between the items
var	timeDiff			= 300,
	//time between each image animation (slideshow)
	slideshowTime		= 3000,
	slideshowInterval,
	//checks if the images are rotating
	isRotating			= false,
	//how many images completed each slideshow iteration
	completed			= 0,
	/*
	all our images have 310 of width and 465 of height.
	this could / should be dynamically calculated
	if we would have different image sizes.

	we will set the rotation origin at
	x = width/2 and y = height*2
	*/
	origin				= ['155px', '930px'],
	init				= function() {
		configure();
		initEventsHandler();
	},
	//initialize some events
	initEventsHandler	= function() {
		/*
		next and previous arrows:
		we will stop the slideshow if active,
		and rotate each items images.
		1 	rotate right
		-1 	rotate left
		*/
		$rm_next.bind('click', function(e) {
			stopSlideshow();
			rotateImages(1);
			return false;
		});
		$rm_prev.bind('click', function(e) {
			stopSlideshow();
			rotateImages(-1);
			return false;
		});
		/*
		start and stop the slideshow
		*/
		$rm_play.bind('click', function(e) {
			startSlideshow();
			return false;
		});
		$rm_pause.bind('click', function(e) {
			stopSlideshow();
			return false;
		});
		/*
		adds events to the mouse and left / right keys
		*/
		$(document).bind('mousewheel', function(e, delta) {
			if(delta > 0) {
				stopSlideshow();
				rotateImages(0);
			}
			else {
				stopSlideshow();
				rotateImages(1);
			}
			return false;
		}).keydown(function(e){
			switch(e.which){
				case 37:
					stopSlideshow();
					rotateImages(0);
					break;
				case 39:
					stopSlideshow();
					rotateImages(1);
					break;
			}
		});
	},
	/*
	rotates each items images.
	we set a delay between each item animation
	*/
	rotateImages		= function(dir) {
		//if the animation is in progress return
		if(isRotating) return false;

		isRotating = true;

		$listItems.each(function(i) {
			var $item 				= $(this),
				/*
				the delay calculation.
				if rotation is to the right,
				then the first item to rotate is the first one,
				otherwise the last one
				*/
				interval			= (dir === 1) ? i * timeDiff : (totalItems - 1 - i) * timeDiff;

			setTimeout(function() {
					//the images associated to this item
				var	$otherImages		= $('#' + $item.data('images')).children('img'),
					totalOtherImages	= $otherImages.length;

					//the current one
					$img				= $item.children('img:last'),
					//keep track of each items current image
					current				= $item.data('current');
					//out of bounds
					if(current > totalOtherImages - 1)
						current = 0;
					else if(current < 0)
						current = totalOtherImages - 1;

					//the next image to show and its
					//initial rotation (depends on dir)
					var otherRotation	= (dir === 1) ? '-30deg' : '30deg',
						$other			= $otherImages.eq(current).clone();

					//for IE <= 8 we will not rotate,
					//but fade out / fade in ...
					//better than nothing :)
					if(!ieLte8)
						$other.css({
							rotate	: otherRotation,
							origin	: origin
						});

					(dir === 1) ? ++current : --current;

					//prepend the next image to the 
					$item.data('current', current).prepend($other);

					//the final rotation for the current image
					var rotateTo		= (dir === 1) ? '80deg' : '-80deg';

					if(!ieLte8) {
						$img.animate({
							rotate	: rotateTo
						}, 1200, function(){
							$(this).remove();
							++completed;
							if(completed === 4) {
								completed = 0;
								isRotating = false;
							}
						});
						$other.animate({
							rotate	: '0deg'
						}, 600);
					}
					else {
						$img.fadeOut(1200, function(){
							$(this).remove();
							++completed;
							if(completed === 4) {
								completed = 0;
								isRotating = false;
							}
						});
					}

			}, interval );
		});

	},
	//set initial rotations
	configure			= function() {
		if($.browser.msie && !ieLte8)
			rotateMaskCorners();
		else if(ieLte8)
			hideMaskCorners();

		$listItems.each(function(i) {
			//the initial current is 1
			//since we already showing the first image
			var $item = $(this).data('current', 1);

			if(!ieLte8)
			$item.transform({rotate: $item.data('rotation') + 'deg'})
				 .find('img')
				 .transform({origin: origin});
		});
	},
	//rotates the masks and corners
	rotateMaskCorners	= function() {
		$rm_mask_left.transform({rotate: '-3deg'});
		$rm_mask_right.transform({rotate: '3deg'});
		$rm_corner_left.transform({rotate: '45deg'});
		$rm_corner_right.transform({rotate: '-45deg'});
	},
	//hides the masks and corners
	hideMaskCorners		= function() {
		$rm_mask_left.hide();
		$rm_mask_right.hide();
		$rm_corner_left.hide();
		$rm_corner_right.hide();
	},
	startSlideshow		= function() {
		clearInterval(slideshowInterval);
		rotateImages(1);
		slideshowInterval	= setInterval(function() {
			rotateImages(1);
		}, slideshowTime);
		//show the pause button and hide the play button
		$rm_play.hide();
		$rm_pause.show();
	},
	stopSlideshow		= function() {
		clearInterval(slideshowInterval);
		//show the play button and hide the pause button
		$rm_pause.hide();
		$rm_play.show();
	};

return {init : init};

As you noticed, we will treat older browsers a bit differently so that the slider works properly.

And that’s it! We really hope you enjoyed the tutorial and like the result!

View demo Download source

3D Wall Gallery

Mary Lou — Wed, 02 Feb 2011 12:41:37 +0000

View demo Download source

Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.

For seeing the 3D effect, please try the demo in Safari.

Summarized, you can do the following things in this gallery:

Hover an image to see a description
Slide through the images using the jQuery UI Slider at the top
Use the mouse wheel to scroll through the images
Use the thumbnail previewer at the bottom to choose an image
Use the hash anchor for the image in the URL to get to it directly
Click on an image to slide it to the left (notice the hash anchor in the URL)
Turn it into a 3D wall when scrolling/sliding (Safari users)
Flipping the perspective when changing the slide/scroll direction (Safari users)

We are using the jQuery hash change plugin by Ben Alman:
jQuery Hashchange Plugin

And we are also using the jQuery Mousewheel Plugin by Brandon Aaron:
jQuery Mousewheel Plugin

The beautiful photography is by Alan Antiporda from Illusive Photography and you can find his Flickr Photostream here: Illusive Photography Photostream

When viewed in the Safari browser, you will see the perspective happening while scrolling or sliding. When changing the direction of scrolling, you will notice that the perspective will tilt to the other side.

You can navigate through the images by either using the jQuery UI slider at the top or your mousewheel.

You can also use the thumbnails previewer to click on an image and get to it directly.

When hovering over an image you can see a little description at the top.

We hope that you enjoy our little experiment and find it useful!

View demo Download source

Thumbnails Preview Slider with jQuery

Mary Lou — Thu, 27 Jan 2011 14:27:37 +0000

View demo Download source

In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.

Check out the Sweet Thumbnails Preview Gallery where me make use of the thumbnails slider idea.

The images are by talented tibchris and you can find them on his Flickr photostream:
tibchris’ photostream

So, let’s start with the markup.

The Markup

The HTML structure will be built up of a main container list that will hold the dot items and a special list item for the thumbnails. The special list item will have the class “ts_thumbnails” and it will be the element that holds the little window where we will see the thumbnails once we hover over a dot.


	Image 1
	Image 2
	Image 3
	Image 4
	Image 5
	Image 6
	Image 7
	Image 8
	Image 9
	Image 10

The empty span will be the little triangle that points to the current dot.
The thumbnails list which will be inside of the div with the class “ts_preview_wrapper” will have the following structure:

Now, let’s take a look at the style.

The CSS

The main container list will be of relative positioning and its width will be the sum of the all the dots’ widths:

ul.ts_container{
	list-style:none;
	margin:0;
	padding:0;
	width:170px;
	margin:20px auto;
	position:relative;
	height:17px;
}

Like we will see later, the width of a dot is 11 plus a padding on each side of 3 pixels. This is just a general style for the main that we will we using in all three showcases. If you have more than 10 dots, you will need to adapt this value to fit all the items (same for the height).

The list items, i.e. the dots, will float left:

ul.ts_container li{
	float:left;
}

The dots itself will be a background image and we will indent the text so that we don’t see it:

ul.ts_container li a{
	display:block;
	text-indent:-9000px;
	width:11px;
	height:11px;
	outline:none;
	padding:0px 3px;
	background:transparent url(../images/sliderIcons/dot.png) no-repeat top center;
}

On hover, we will change the position of the background image so that we see the lower part of it:

ul.ts_container li a:hover,
ul.ts_container li.selected a{
	background-position:50% -11px;
}

The last list item which is our special thumbnails container will be of absolute positioning since we want to move it around. It’s initially not visible:

ul.ts_container li.ts_thumbnails{
	display:none;
	position:absolute;
}

The empty span will be our little triangle. We will set it’s position dynamically since it depends on the size of your thumbnails:

ul.ts_container li.ts_thumbnails span{
	background:transparent url(../images/sliderIcons/triangle.png) no-repeat top center;
	width:15px;
	height:6px;
	position:absolute;
}

Tip: If you feel generally uncomfortable with using empty elements in your HTML, simply add a meaningful text to it and set the text-indent to a very low value so that it’s not visible. Your HTML will be more readable and you can sleep better :)

The preview wrapper will have a white border and a nice box shadow. The dimensions are, again, set dynamically since they depend on the size of your thumbnails. The overflow should be hidden, because we will have a row of thumbnails in the list inside of this wrapper:

.ts_preview_wrapper{
	border:5px solid #fff;
	overflow:hidden;
	position:relative;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	box-shadow:0px 0px 5px #999;
}

The list with all the thumbnails will be absolute, since we want to animate its left position in order to show the right thumbnail. The dimensions are calculated dynamically, for example, the width will be the sum of all thumbnails widths. But we will look into that when we define our JavaScript function.

ul.ts_preview{
	position:absolute;
	left:0px;
	top:0px;
	margin:0;
	padding:0;
	list-style-type:none;
}

The list items that hold the thumbnails will be floating left, so that they are stacked horizontally:

ul.ts_preview li{
	float:left;
}

The thumbnails need to be display block, to avoid any spacing in the li:

ul.ts_preview li img{
	display:block;
}

And that’s all the style! Let make some magic and go through one example.

The JavaScript

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!

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
});

We hope you enjoyed the tutorial and find it useful!

View demo Download source

Parallax Slider with jQuery

Mary Lou — Sun, 02 Jan 2011 23:10:25 +0000

View demo Download source

Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

The wonderful images are taken from Tetsumo’s Flickr Photo Stream: http://www.flickr.com/photos/tetsumo/

So, let’s start!

The Markup

The HTML structure is going to consist of a main container with the class “pxs_container”. We will add a wrapper for the three different backgrounds which we will animate differently to create the parallax. The background images will have some transparency since we want to see them moving on top of each other.

We will also add a loading element and the two unordered lists for the full images and the thumbnails. Further, we will add the navigation elements.


	
		
		
		
	
	Loading images...
	
		
			
			
			...
		
		
			
			
		
		
			
			
			...

Now, let’s take a look at the style.

The CSS

We will start with the main container. Since we will use the whole page for the width of the slider, we will set it to 100%. It will be of position relative because we will set all the element inside to position absolute (and we want them to be positioned relative to the container and not the page):

.pxs_container{
	width:100%;
	height:420px;
	position:relative;
	border-top:7px solid #333;
	border-bottom:7px solid #333;
	overflow:hidden;
	-moz-box-shadow:0px 0px 7px #000;
	-webkit-box-shadow:0px 0px 7px #000;
	box-shadow:0px 0px 7px #000;
}

The wrapper for the divs that will contain the parallax backgrounds will have a repeated background image. This image is just a simple gradient:

.pxs_bg{
	background:transparent url(../images/bg.png) repeat top left;
}

The divs inside of the wrapper will share the following style properties:

.pxs_bg div{
	position:absolute;
	top:0px;
	left:0px;
	height:420px;
	background-repeat:repeat;
	background-position:top left;
	background-color:transparent;
}

The width will be set dynamically in the JavaScript. The single background divs will have all a different background image:

.pxs_bg .pxs_bg1{
	background-image:url(../images/bg1.png);
}
.pxs_bg .pxs_bg2{
	background-image:url(../images/bg2.png);
}
.pxs_bg .pxs_bg3{
	background-image:url(../images/bg3.png);
}

We will also set the left value of these divs dynamically. But we will come back to that later. Let’s take a look at the other elements’ style.

The following wrapper will be invisible in the beginning:

.pxs_slider_wrapper{
	display:none;
}

It contains all the elements that we want to load in the beginning, so once loading is done, we will show the wrapper and all its content.

Let’s reset the style for both lists:

.pxs_container ul{
	margin:0px;
	padding:0px;
	list-style:none;
}

The main idea for the slider list is that we make a really long list with all the li elements having a width of the whole window. So, what you see on screen of the slider is actually one whole li. We will set the width of the ul dynamically to be the window width times the number of images in the list. Making the li elements float left and the correct width of the ul will ensure that the li elements are lined up next to each other:

ul.pxs_slider{
	position:absolute;
	left:0px;
	top:0px;
	height:420px;
}
ul.pxs_slider li{
	height:420px;
	float:left;
	position:relative;
}

The slider image inside of the li will be centered horizontally by applying auto margins to the left and right:

ul.pxs_slider li img{
	display:block;
	margin:35px auto 0px auto;
	-moz-box-shadow:0px 0px 7px #222;
	-webkit-box-shadow:0px 0px 7px #222;
	box-shadow:0px 0px 7px #222;
	border: 8px solid transparent;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

Adding a transparent border and a box shadow will create a glass like effect around the image.

The thumbnails list will be positioned absolutely, too. We add a left of 50% because we want to center it, by dynamically setting its width and a negative left margin in the JavaScript:

ul.pxs_thumbnails{
	height:35px;
	position:absolute;
	top:320px;
	left:50%;
}
ul.pxs_thumbnails li{
	position:absolute;
	display:block;
}

We’ll add a white border around the thumbnails and give them a slick box shadow:

ul.pxs_thumbnails li img{
	border: 5px solid #FFFFFF;
	-moz-box-shadow:1px 1px 7px #555;
	-webkit-box-shadow:1px 1px 7px #555;
	box-shadow:1px 1px 7px #555;
	cursor:pointer;
	display:block;
	opacity:0.7;
}

The current image’s thumbnails should be completely opaque:

ul.pxs_thumbnails li.selected img{
	opacity:1.0;
}

The common style of the two navigation spans is the following:

.pxs_navigation span{
	position:absolute;
	width:30px;
	height:60px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
	top:145px;
	opacity:0.6;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	cursor:pointer;
}
.pxs_navigation span:hover{
	opacity:0.9;
}

Let’s add an arrow to each navigation span:

.pxs_navigation span.pxs_prev{
	background:#000 url(../images/prev.png) no-repeat center center;
}
.pxs_navigation span.pxs_next{
	background:#000 url(../images/next.png) no-repeat center center;
}

We will set the left (pxs_prev) and the right (pxs_next) value dynamically in order to stick to the left and right side of the image.

And finally, we will style the loading element which will be centered:

.pxs_loading{
	color:#fff;
	font-size:20px;
	padding:15px 15px 15px 50px;
	position:absolute;
	background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	opacity:0.7;
	width:180px;
	position:absolute;
	top:150px;
	left:50%;
	margin-left:-90px;
}

And that’s all the style! Now, let’s add some kick-ass jQuery!

The JavaScript

The main idea of this slider is to slide the images (obviously) and to animate the three backgrounds differently to create some perspective. So, when we, for example, slide to the next image, we will animate the left value of the slider ul to minus the window width (because that’s the width of one li). We will also animate the background div that is visually the top-most background, but the animation will only be half of the window width. The background behind that one will move one quarter of the window width and so on. So the background which is “more far” will move less, just what the parallax principle describes.

We want to create a plugin out of this script, so we will initially define some options. We will start by caching the most important elements.

(function($) {
	$.fn.parallaxSlider = function(options) {
		var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
		return this.each(function() {
			var $pxs_container 	= $(this),
			o 				= $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

			//the main slider
			var $pxs_slider		= $('.pxs_slider',$pxs_container),
			//the elements in the slider
			$elems			= $pxs_slider.children(),
			//total number of elements
			total_elems		= $elems.length,
			//the navigation buttons
			$pxs_next		= $('.pxs_next',$pxs_container),
			$pxs_prev		= $('.pxs_prev',$pxs_container),
			//the bg images
			$pxs_bg1		= $('.pxs_bg1',$pxs_container),
			$pxs_bg2		= $('.pxs_bg2',$pxs_container),
			$pxs_bg3		= $('.pxs_bg3',$pxs_container),
			//current image
			current			= 0,
			//the thumbs container
			$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
			//the thumbs
			$thumbs			= $pxs_thumbnails.children(),
			//the interval for the autoplay mode
			slideshow,
			//the loading image
			$pxs_loading	= $('.pxs_loading',$pxs_container),
			$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);

			//first, preload all the images
			var loaded		= 0,
			$images		= $pxs_slider_wrapper.find('img');

			$images.each(function(){
				var $img	= $(this);
				$('').load(function(){
					++loaded;
					if(loaded	== total_elems*2){
						$pxs_loading.hide();
						$pxs_slider_wrapper.show();

						//width of an image
						//(assuming all images have the same sizes)
						var one_image_w		= $pxs_slider.find('img:first').width();

						/*
						set the width of the slider,
						of each one of its elements, and of the
						navigation buttons
						 */
						setWidths($pxs_slider,
						$elems,
						total_elems,
						$pxs_bg1,
						$pxs_bg2,
						$pxs_bg3,
						one_image_w,
						$pxs_next,
						$pxs_prev);

						/*
						set the widths of the thumbs
						and spread them evenly
						 */
						$pxs_thumbnails.css({
							'width'			: one_image_w + 'px',
							'margin-left' 	: -one_image_w/2 + 'px'
						});
						var spaces	= one_image_w/(total_elems+1);
						$thumbs.each(function(i){
							var $this 	= $(this);
							var left	= spaces*(i+1) - $this.width()/2;
							$this.css('left',left+'px');

							if(o.thumbRotation){
								var angle 	= Math.floor(Math.random()*41)-20;
								$this.css({
									'-moz-transform'	: 'rotate('+ angle +'deg)',
									'-webkit-transform'	: 'rotate('+ angle +'deg)',
									'transform'			: 'rotate('+ angle +'deg)'
								});
							}
							//hovering the thumbs animates them up and down
							$this.bind('mouseenter',function(){
								$(this).stop().animate({top:'-10px'},100);
							}).bind('mouseleave',function(){
								$(this).stop().animate({top:'0px'},100);
							});
						});

						//make the first thumb to be selected
						highlight($thumbs.eq(0));

						//slide, when clicking the navigation buttons
						$pxs_next.bind('click',function(){
							++current;
							if(current >= total_elems)
								if(o.circular)
									current = 0;
							else{
								--current;
								return false;
							}
							highlight($thumbs.eq(current));
							slide(current,
							$pxs_slider,
							$pxs_bg3,
							$pxs_bg2,
							$pxs_bg1,
							o.speed,
							o.easing,
							o.easingBg);
						});
						$pxs_prev.bind('click',function(){
							--current;
							if(current < 0)
								if(o.circular)
									current = total_elems - 1;
							else{
								++current;
								return false;
							}
							highlight($thumbs.eq(current));
							slide(current,
							$pxs_slider,
							$pxs_bg3,
							$pxs_bg2,
							$pxs_bg1,
							o.speed,
							o.easing,
							o.easingBg);
						});

						/*
						clicking a thumb will slide to the respective image
						 */
						$thumbs.bind('click',function(){
							var $thumb	= $(this);
							highlight($thumb);
							//if autoplay interrupt when user clicks
							if(o.auto)
								clearInterval(slideshow);
							current 	= $thumb.index();
							slide(current,
							$pxs_slider,
							$pxs_bg3,
							$pxs_bg2,
							$pxs_bg1,
							o.speed,
							o.easing,
							o.easingBg);
						});

						/*
						activate the autoplay mode if
						that option was specified
						 */
						if(o.auto != 0){
							o.circular	= true;
							slideshow	= setInterval(function(){
								$pxs_next.trigger('click');
							},o.auto);
						}

						/*
						when resizing the window,
						we need to recalculate the widths of the
						slider elements, based on the new window width;
						we need to slide again to the current one,
						since the left of the slider is no longer correct
						 */
						$(window).resize(function(){
							w_w	= $(window).width();
							setWidths(
								$pxs_slider,
								$elems,
								total_elems,
								$pxs_bg1,
								$pxs_bg2,
								$pxs_bg3,
								one_image_w,
								$pxs_next,
								$pxs_prev
								);
							slide(
								current,
								$pxs_slider,
								$pxs_bg3,
								$pxs_bg2,
								$pxs_bg1,
								1,
								o.easing,
								o.easingBg
								);
						});

					}
				}).error(function(){
					alert('here')
				}).attr('src',$img.attr('src'));
			});
		});
	};

	//the current window width
	var w_w				= $(window).width();

	var slide			= function(current,
	$pxs_slider,
	$pxs_bg3,
	$pxs_bg2,
	$pxs_bg1,
	speed,
	easing,
	easingBg){
		var slide_to	= parseInt(-w_w * current);
		$pxs_slider.stop().animate({
			left	: slide_to + 'px'
		},speed, easing);
		$pxs_bg3.stop().animate({
			left	: slide_to/2 + 'px'
		},speed, easingBg);
		$pxs_bg2.stop().animate({
			left	: slide_to/4 + 'px'
		},speed, easingBg);
		$pxs_bg1.stop().animate({
			left	: slide_to/8 + 'px'
		},speed, easingBg);
	}

	var highlight		= function($elem){
		$elem.siblings().removeClass('selected');
		$elem.addClass('selected');
	}

	var setWidths		= function($pxs_slider,
	$elems,
	total_elems,
	$pxs_bg1,
	$pxs_bg2,
	$pxs_bg3,
	one_image_w,
	$pxs_next,
	$pxs_prev){
		/*
		the width of the slider is the window width
		times the total number of elements in the slider
		 */
		var pxs_slider_w	= w_w * total_elems;
		$pxs_slider.width(pxs_slider_w + 'px');
		//each element will have a width = windows width
		$elems.width(w_w + 'px');
		/*
		we also set the width of each bg image div.
		The value is the same calculated for the pxs_slider
		 */
		$pxs_bg1.width(pxs_slider_w + 'px');
		$pxs_bg2.width(pxs_slider_w + 'px');
		$pxs_bg3.width(pxs_slider_w + 'px');

		/*
		both, the right and left of the
		navigation next and previous buttons will be:
		windowWidth/2 - imgWidth/2 + some margin
		(not to touch the image borders)
		 */
		var position_nav	= w_w/2 - one_image_w/2 + 3;
		$pxs_next.css('right', position_nav + 'px');
		$pxs_prev.css('left', position_nav + 'px');
	}

	$.fn.parallaxSlider.defaults = {
		auto			: 0,
		speed			: 1000,
		easing			: 'jswing',
		easingBg		: 'jswing',
		circular		: true,
		thumbRotation	: true
	};
	//easeInOutExpo,easeInBack
})(jQuery);

We also add the following script to initiate our slider:

$(function() {
	var $pxs_container	= $('#pxs_container');
	$pxs_container.parallaxSlider();
});

The options for the slider are the following:

auto: How many seconds to periodically slide the content. If set to 0 then autoplay is turned off.
speed: Speed of each slide animation
easing: Easing effect for the slide animation
easingBg: Easing effect for the background animation
circular: Circular slider
thumbRotation: The thumbs will be randomly rotated

And that’s all! We hope you enjoyed the tutorial and find it useful!

View demo Download source

Portfolio Zoom Slider with jQuery

Mary Lou — Mon, 27 Dec 2010 18:17:13 +0000

View demo Download source

In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking. Moreover, we want to have a couple of images for each item, hence we will create a slider.

When integrating jQuery scripts, it sometimes happens that there are conflicts, be it because of some shared attribute or because of some specific structure that is needed by each jQuery plugin. In this tutorial we will bump into some of these conflicts and we will adapt some lines of code in order to bypass them.

So, let’s start with the markup!

The Markup

For each item we will have a div element. There we will add an element for the thumbnails slider which we will give the class “thumb_wrapper” and an element for the description with the respective class name:


	
		
			
				
					
						
					
				
				...
				...
			
		
		
		
		Hover to zoom, click to view
	
	
		Portfolio Item
		Some description

The link element which wraps the image will have the href pointing to the large image. Both plugins that we are using take advantage of that structure. They will build their elements with the information provided in the href attribute.

Additonally, we will add the following attributes and class name to each link element:

...

The “rel” attribute is actually used by both plugins but we will change the Fancybox plugin, so that it used the “rev” attribute instead. The Fancybox plugin can create a gallery if we give the same “rev” value to a group of images. So, our thumbnails in the first item will all have the “group1″ rev value and the the thumbnails in the second item will have “group2″ and so forth.
For configuring the Cloud Zoom plugin, we will add some parameters to the “rel” attribute.
For more information on the configuration of the plugins, please visit the Cloud Zoom plugin and Fancybox plugin websites.
The position:’body’ value is an adapted value that we will come to later, when we go into the jQuery.

Let’s look at the styling.

The CSS

First we will define the style for the item:

.item{
	float:left;
	width:100%;
	clear:both;
	margin:35px 0px;
}

Now, we will position the thumb wrapper which contains the navigation and the thumbnail slider:

.thumb_wrapper{
	width:290px;
	height:107px;
	position:relative;
	float:left;
	margin:20px 40px 0px 0px;
}

The navigation elements will be positioned absolutely. That’s why we needed to set the parent to a relative position. The common style for both navigation elements is:

.thumb_wrapper a.prev,
.thumb_wrapper a.next{
	width:30px;
	height:30px;
	position:absolute;
	top:50%;
	margin-top:-15px;
	outline:none;
	cursor:pointer;
}

And the individual style for each navigation element is the following:

.thumb_wrapper a.prev{
	left:0px;
	background:transparent url(../images/fancy_nav_left.png) no-repeat top left;
}
.thumb_wrapper a.next{
	right:0px;
	background:transparent url(../images/fancy_nav_right.png) no-repeat top left;
}

The style for the small info span under the slider:

.thumb_wrapper span{
	display:block;
	text-align:center;
	font-size:11px;
	font-style:italic;
	margin-top:3px;
}

The thumb element is the container for the unordered list of thumbnails. We will set the overflow to hidden, since we don’t want our list to show:

.thumb{
	margin-left:40px;
	width:210px;
	height:107px;
	overflow:hidden;
	-moz-box-shadow:1px 1px 3px #555;
	-webkit-box-shadow:1px 1px 3px #555;
	box-shadow:1px 1px 3px #555;
}

The ul for the thumbnails will have a dynamically calculated width which will overwrite the following one:

.thumb ul{
	list-style:none;
	width:800px;
	height:107px;
}

The list items have to flow left so that we have all the thumbnails in a line. The idea is, to animate the ul to the right position, revealing the next/previous thumbnail in our “line”.

.thumb ul li{
	float:left;
}

Let’s decorate the thumbnail images:

.thumb ul li a img{
	border:5px solid #fff;
}

The description will be floating right of the slider:

.description{
	width:620px;
	float:right;
}

And that was all the style! That’s take a look at the JavaScript.

The JavaScript

The main idea is to create a little slider where the user can navigate through the thumbnails of a portfolio item. Then, when hovering over the thumbnail, we want a zoomed version of the hovered part of the thumbnail to appear on the right side. When clicking on a thumbnail, we want the Fancybox to appear, allowing the user to view the full image and navigate through the set.

So, we will start by including the necessary stylesheets and scripts. First, we will add the stylesheets to the head of our HTML:

Then, we will add all the scripts in the end of the HTML:

In our jQuery function we will first initialize the Fancybox and then we will define the functionality of the slider. As mentioned before, the Cloud Zoom plugin parameters are set in the “rel” attribute of the link element that wraps the thumbnail image.

Let’s initialize the Fancybox:

$("#content .cloud-zoom").fancybox({
	'transitionIn'	:	'elastic',
	'transitionOut'	:	'none',
	'speedIn'		:	600,
	'speedOut'		:	200,
	'overlayShow'	:	true,
	'overlayColor'	:	'#000',
	'cyclic'		:	true,
	'easingIn'		:	'easeInOutExpo'
});

We need to deal with a conflict now, which is caused by the Cloud Zoom Plugin adding a div element on top of our link element. It conflicts with the Fancybox Plugin since we cannot click the link element anymore (it’s covered). So, we will add a little function that will trigger the click on the link element whenever we click on the div with the class “mousetrap” that gets generated by the Cloud Zoom Plugin:

$("#content .mousetrap").live('click',function(){
	$(this).prev().trigger('click');
});

Now, we will define some variables for our slider:

var $content	= $('#content'),
$thumb_list = $content.find('.thumb > ul');

The slider ul needs to get a width assigned to it which will be the sum of the widths of each thumbnail inside. We will also define the click events on the navigation buttons:

$thumb_list.each(function(){
	var $this_list	= $(this),
	total_w		= 0,
	loaded		= 0,
	//preload all the images first
	$images		= $this_list.find('img'),
	total_images= $images.length;
	$images.each(function(){
		var $img	= $(this);
		$('').load(function(){
			++loaded;
			if (loaded == total_images){
				$this_list.data('current',0).children().each(function(){
					total_w	+= $(this).width();
				});
				$this_list.css('width', total_w + 'px');

				//next / prev events

				$this_list.parent()
				.siblings('.next')
				.bind('click',function(e){
					var current = $this_list.data('current');
					if(current == $this_list.children().length -1) return false;
					var	next	= ++current,
					ml		= -next * $this_list.children(':first').width();

					$this_list.data('current',next)
					.stop()
					.animate({
						'marginLeft'	: ml + 'px'
					},400);
					e.preventDefault();
				})
				.end()
				.siblings('.prev')
				.bind('click',function(e){
					var current = $this_list.data('current');
					if(current == 0) return false;
					var	prev	= --current,
					ml		= -prev * $this_list.children(':first').width();

					$this_list.data('current',prev)
					.stop()
					.animate({
						'marginLeft'	: ml + 'px'
					},400);
					e.preventDefault();
				});
			}
		}).attr('src',$img.attr('src'));
	});
});

And that’s all! We adapted the Fancybox script slightly in order to show the navigation arrows constantly when hovering over the full image. Also, we adapted the z-indexes of the Fancybox elements in the stylesheet (we added 10000 to each z-index) in order to work with the other elements in the page and the Cloud Zoom elements. In the Cloud Zoom script we added another case for the position, since we need to append the zoom element to the body using the absolute positions of the thumbnails.

We hope you enjoyed the tutorial and find it useful!

View demo Download source

Collective: Tiny Circleslider

Community — Fri, 12 Nov 2010 10:40:40 +0000

Tiny Circleslider is a circular slider / carousel. That was built to provide webdevelopers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library.

Source

http://baijs.nl/tinycircleslider/

Demo

http://baijs.nl/tinycircleslider/

Codrops » slider

Elastislide – A Responsive jQuery Carousel Plugin

The HTML Structure

Options

Slicebox – A fresh 3D image slider with graceful fallback

Usage

Options

Circular Content Carousel with jQuery

The HTML Structure

Stop factory farming

“ Some text...

Animals are not commodities

Content Rotator with jQuery

Examples

The slide title

Some sub-title read more →

The slide title

Another slide title

Rotating Image Slider with jQuery

The Markup

Fashion Explosion 2012

The CSS

The JavaScript

3D Wall Gallery

Thumbnails Preview Slider with jQuery

The Markup

The CSS

The JavaScript

Example

Parallax Slider with jQuery

The Markup

The CSS

The JavaScript

Portfolio Zoom Slider with jQuery

The Markup

Portfolio Item

The CSS

The JavaScript

Collective: Tiny Circleslider

Source

Demo