Create a Vertical Sliding Bar Thumbnail Effect with jQuery

Introduction

Hi all, thanks for reading this tutorials. This is a revisit to my previous tutorial - Create a Stunning Sliding Door Effect with jQuery. We're going to change the transition for a little bit. Instead of moving it diagonally, we are doing it vertically. And you could make your own transition as well!

Also, I have other tutorials that good for thumbnail effects. If you're interested to read more, you can visit:

• Thumbnail Gallery with Slick Heading and Caption Effect with jQuery Tutorial
• jQuery Thumbnail with Zooming Image and Fading Caption Tutorial
• Create a Stunning Sliding Door Effect with jQuery

1. HTML

We are not using UL List, because I found that, this not really a list, but individual object. So, basically we have a div with qitem class wrapped an anchor tag and span. The title and descriptive text are hidden underneath the image.

<div class="qitem">
	<a href="http://www.google.com"><img data-src="image.gif" alt="Test 1" title="" width="140" height="140"/></a>
	<span class="caption"><h4>Title1</h4><p>Description</p></span>
</div>

2. CSS

CSS is identical with my previous tutorial except instead of corners, it's bars.

In CSS section, it's quite simple. We have a class called qitem. qitem must be:

• overflow:hidden to hide those four bar on hover,
• float:left to create the multi rows and columns
• and cursor:hand/ cursor:pointer to let uses know they can click on it.

For caption, position:absolute is a must to se the z-index. Caption should be layered under the four bars

We need to set the generic setting for all the bars. We can do this in javascript, but it would be more efficient and simpler to do it with CSS. You see, the good thing in web development is, one problem can have different type of solutions.

Javascript will assign background image, background position, top and left value to bar1, bar2, bar3 and bar4.

body {
	font-family:arial;	
}

.qitem {
	width:140px;
	height:140px;	
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	background: url('bg.gif') no-repeat;	
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
	cursor:hand; cursor:pointer;
}

	.qitem img {
		border:0;
	
		/* allow javascript moves the img position*/
		position:absolute;
		z-index:200;
	}

	.qitem .caption {
		position:absolute;
		z-index:0;	
		color:#ccc;
		display:block;
	}

		.qitem .caption h4 {
			font-size:12px;
			padding:10px 5px 0 8px;
			margin:0;
			color:#369ead;
		}

		.qitem .caption p {
			font-size:10px;	
			padding:3px 5px 0 8px;
			margin:0;
		}



/* Setting for bars */
.bar1, .bar2, .bar3, .bar4 {
	position:absolute;
	background-repeat: no-repeat; 
	z-index:200;
}

.clear {
	clear:both;	
}

3. Javascript

Also, in this section, it's identical with previous tutorial, we only have to change some CSS and generate some values.

Compared to the corners animation, this is easier because we only have to generate values for top and bottom. After that, assign the value to animate function.

You can go through the code below, I have added comments which will make it easy to understand

$(document).ready(function() {

	//Custom settings
	var style_in = 'easeOutBounce';
	var style_out = 'jswing';
	var speed_in = 800;
	var speed_out = 300;	

	//Top and bottom
	var	top = $('.qitem').height() * (-1); 
	var	bottom = $('.qitem').height(); 

	$('.qitem').each(function () {

		//retrieve all the details of the image before removing it
		url = $(this).find('a').attr('href');
		img = $(this).find('img').attr('src');
		alt = $(this).find('img').attr('img');
		width = $(this).width() / 4; 
		height = $(this).height(); 
		
		//remove the image and append 4 div into it
		$('img', this).remove();
		$(this).append('
');
		
		//set the image as background image to all the bars
		$(this).children('div').css('background-image','url('+ img + ')');

		//Divide the image into 4 bars and rebuild the image
		$(this).find('div.bar1').css({top:0, left:0, width:width, height:height, backgroundPosition:'0 0' });	
		$(this).find('div.bar2').css({top:0, left:width, width:width, height:height, backgroundPosition:(width*-1) + 'px 0' });	
		$(this).find('div.bar3').css({bottom:0, left:width*2, width:width, height:height, backgroundPosition:(width*-2) + 'px 0' });	
		$(this).find('div.bar4').css({bottom:0, left:width*3, width:width , height:height, backgroundPosition:(width*-3) + 'px 0' });

	}).hover(function () {
		
		//Move those bar, 1st and 3rd move upward, 2nd and 4th move downward
		$(this).find('div.bar1').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bar2').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bar3').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});	
		$(this).find('div.bar4').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});	
				
	},
	
	function () {

		//Back to default position
		$(this).find('div.bar1').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bar2').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bar3').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});	
		$(this).find('div.bar4').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});	
	
	}).click (function () {
		
		//make the whole box clickable
		window.location = $(this).find('a').attr('href');	
	});

});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, bookmark it and help me to spread this tutorial to our friends! :) Thanks!

• TAGS: