HTML

Create a Vertical Sliding Bar Thumbnail Effect with jQuery

Written by Kevin Liew on 01 Dec 2009
53,589 Views • Shares
8 comments
Demonstration Download

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:

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 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!

    Demonstration Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

8 comments
Adam 7 years ago
Very cool effect thanks for the tuturial.
Reply
dlv 7 years ago
great!
To be honest, i don\'t love the look/style of this aprticular bar sliding effect, but it\'s very good, usefull and (for me) I think it was complex to create, so congrats to you

and thanks for share as always!

adeux!
demian.
Reply
Patrick 7 years ago
Very usefull, currently i am working on my new private Portfolio and still searching for new ideas how to make the gallery.

I think i can use this for making little thumbs with a short description and open it in a new fancybox window with more details, if people want to know this.

Thanks a lot
Reply
Fabio 6 years ago
hi,
i've tried to create this effect, the dimension of my box are 250 px and in my case it create some lines that divide the images... i've tried to edit the code but without success... can suggest me how can solve this issue? Thanks
Reply
Fabio 6 years ago
maybe i solve my issue ... i think because 250 / 4 don't return an integer and the decimal that remain create those lines... hope this help
Reply
Fabio 6 years ago
don't read my previous post ... ahahaha ... was an absurd no-solution. I need to create more bars. It's the end of the day .. sorry :P
Reply
Kevin Liew Admin 6 years ago
ar, sorry man, I don't how I can missed your post. Quite a big change, really. You will have to duplicate a lot of code in jQuery. All those bar1,bar2, where you see them, you will have to add like bar5 and bar6... not really easy to mod though :/
Reply
Eric 6 years ago
Very cool effect and great tutorial, but I am having issues trying to use it within one of my divs. I currently have an Onclick div swap function and it is not allowing me to use this thumbnail effect within the div. I am using this technique here: http://www.dynamicdrive.com/forums/showthread.php?t=60928 any suggestions on how to get the two to work?
Reply