Create Groovershark-like Widget Slider

April 10

1 shout so far

Groovershark has a nice style on displaying their widgets. As you can see from their website, the slider has three elements addition that make it more beauty, they’re gradient image on the left and the right side and the image as a border for the selected widget on the center. Yes, we’ll make that thing from stratch.

Show Implementation

Download Source

The Technique
The gradient effect are only an image that have the same pattern as the document background, to add a gradient effect we just need to add a gradient transparency effect using image editor. While the image as a border in the center is an image that only contains a border (transparent in the center of image).

one

The content contains two stacked layer, the top layer collate these three images and the bottom layer contains list of the widget’s image. We put together these three images in one row : left gradient, image as a border and right gradient. So the widget’s in bottom layer will have a gradient transparency effect on the left and the right side and border in the center.

two

The Elements and Its Style
Now we’ll set up the HTML elements and styling them. As above explanation, we must create two stacked layer on the content layer, top and bottom layer. Top layer contains three images (two gradient images and an image as a border) and bottom layer contains the widget’s images.

HTML

<div id="container">
	<div id="content">
		<div id="top">
			<img src="images/jquery_06.png" class="items" />
			<img src="images/jquery_08.png" class="items" />
			<img src="images/jquery_03.png" class="items" />
		</div>
		<div id="bottom">
			<ul id="slider">
				<li class="images"><img src="images/checkbox.png" alt="Stylize Your Own Checkboxes" /></li>
				<li class="images"><img src="images/confirm.png" alt="jQuery Plugin : jConfirmAction" /></li>
				<li class="images selected"><img src="images/css-position.png" alt="Engage 2 CSS Positions : Relative & Absolute" /></li>
				<li class="images"><img src="images/label.png" alt="Mask Your Input Forms and Make It Beauty" /></li>
			</ul>
		</div>
		<br/>
		<span id="the-title">Engage 2 CSS Positions : Relative & Absolute</span><br/>
		<span id="the-prev"><img src="images/prev.png" alt="prev" /></span>
		<span id="the-next"><img src="images/next.png" alt="next" /></span>
	</div>
</div>

Div Container will set the content centered. Since stacking the layers will using absolute position we must wrap the top and bottom layer into the Div Content, so these two layers won’t overflowing our setted position. Div Top will works as a top layer and Div Bottom as a bottom layer.

Div Slider will work as a slider, we will slide this div to the left and to the right. We also set default selected images for pointing the current images that has a border on its top layer.

CSS

#container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}
 
	#content {
		height: 294px;
		position: relative;
	}
 
	#top {
		position: absolute;
		left: 0;
		top: 0;
	}
		.items {
			margin-right: 2.25em;
		}
 
	#bottom {
		width: 650px;
		overflow: hidden;
	}
 
	#slider {
		padding-top: 5.3em;
  		width: 9999px;
  		text-align: left;
  		margin-left: -236px;
	}	
 
		li.images {
			display: inline;
			list-style-type: none;
			margin-right: 52px;
		}
 
		#the-next, #the-prev {
			cursor: pointer; 
		}

From the CSS above we’ve set the widget’s image position based on the Div Bottom’s images position, so they will have a gradient transparency effect to them and the center image will have a border.

Slide Them Using jQuery
At this step we’ve list images with gradient transparency effect on the left and the right side and border effect in the center. We’ll move the slider to the left or right by clicking next and previous button using jQuery.

JavaScript

$(document).ready(function() {	
	$('#the-next').click(function() {
 
		slider			= $('#slider');
		selectedItems	= slider.children('li.selected');
		nextItem			= selectedItems.next('li');
		nextItemImg		= nextItem.children('img');
 
		nextItemIndex	= nextItem.index() - 1;
		nextItemPos		= 236 * nextItemIndex;
		nextItemPos 	= -nextItemPos+'px';
 
		if(nextItem.is('li')) {
 
			slider.animate({"marginLeft" : nextItemPos});
 
			selectedItems.removeClass('selected');
			nextItem.addClass('selected');
 
			$('#the-title').fadeOut(100, function() {
				$(this).text(nextItemImg.attr('alt')).fadeIn();
			});
		}
 
	});
 
	$('#the-prev').click(function() {
 
		slider			= $('#slider');
		selectedItems	= slider.children('li.selected');
		prevItem			= selectedItems.prev('li');
		prevItemImg		= prevItem.children('img');
 
		prevItemIndex	= prevItem.index() - 1;
		prevItemPos		= 236 * -prevItemIndex;
		prevItemPos 	= prevItemPos+'px';
 
		if(prevItem.is('li')) {
			slider.animate({"marginLeft" : prevItemPos});
 
			selectedItems.removeClass('selected');
			prevItem.addClass('selected');
 
			$('#the-title').fadeOut(100, function() {
				$(this).text(prevItemImg.attr('alt')).fadeIn();
			});
		}
	});
});

We attach the next and previous button with click function, then grab the previous or next items and count its index (index is the number of the elements from its parent). Multiply the index with image width and its margin (for this example we have 236px). If the user click next button and the next item exist, we slide the Div Slider to the left by set its left margin with minus values and vice versa.

After sliding the Div Slider, we remove the selected class from previous selected image and add the class to current selected image. The last step is to show the title for selected image by fetching its alt attribute and add them to span element. To make it animate, we remove previous title using fadeOut() and show next title using fadeIn().

Conclusion
For having gradient transparency effect of an image we just need to stack the gradient image on top of the another image and set their position using CSS. At this point we have completed each step to create Groovershark-like widget slider, you can use them for displaying your featured posts or best seller items on your e-commerce, etc. Thanks for reading! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated