AddThis

Instruction and Assets

Click on the basket, and a suite of large Aquaticus icons expand with some jQuery from NetTuts.

Download Example Try Demo

The CSS

/* Share Stack Styles */			
.stack { position: fixed; bottom: 28px; right: 40px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span { 
	display: block;
	position: absolute;
	top: 17px;
	right: 60px;
	height: 14px;	
	line-height: 14px;
	background-color:#000;
	border: 0;	
	padding: 3px 10px;	
	text-align: center;
	text-shadow: #000 1px 1px 1px;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 12px;
	color: #fcfcfc;	
	border-radius: 10px;	
	opacity: .85;
	filter: alpha(opacity = 85);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }

The HTML

<div class="stack addthis_toolbox">
    <img src="images/stack.png" alt="stack"/>
    <ul id="stack" class="custom_images">
        <li><a class="addthis_button_facebook"><span>Facebook</span><img src="images/facebook.png" alt="Share to Facebook" /></a></li>
        <li><a class="addthis_button_stumbleupon"><span>StumbleUpon</span><img src="images/stumbleupon.png" alt="Stumble It" /></a></li>
        <li><a class="addthis_button_reddit"><span>Reddit</span><img src="images/reddit.png" alt="Share to Reddit" /></a></li>
        <li><a class="addthis_button_digg"><span>Delicious</span><img src="images/digg.png" alt="Share to Digg" /></a></li>
        <li><a class="addthis_button_more"><span>More...</span><img src="images/addthis.png" alt="More..." /></a></li>
    </ul>
</div>

The Javascript

First, make sure to add in the external script libraries/files (usually before the closing </body> tag):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=YOUR-PROFILE-ID"></script>

Next, there's the scripting for the stack animation:

<script type="text/javascript">
$(function () { 
	// Stack initialize
	var openspeed = 300;
	var closespeed = 300;
	$('.stack>img').toggle(function(){
		var vertical = 0;
		var horizontal = 0;
		var $el=$(this);
		$el.next().children().each(function(){
			$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
			vertical = vertical + 55;
			horizontal = (horizontal+.75)*2;
		});
		$el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
		   .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
		$el.animate({paddingTop: '0'});
	}, function(){
		//reverse above
		var $el=$(this);
		$el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
		$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
		$el.animate({paddingTop: '35px'});
	});
	
	// Stacks additional animation
	$('.stack li a').hover(function(){
		$("img",this).animate({width: '56px'}, 100);
		$("span",this).animate({marginRight: '30px'});
	},function(){
		$("img",this).animate({width: '50px'}, 100);
		$("span",this).animate({marginRight: '0'});
	});
});}
</script>

Important: For '#pubid=YOUR-PROFILE-ID' above, change 'YOUR-PROFILE-ID' to your Profile ID if you want analytics data to be collected. If you do not want analytics, this phrase can be removed.

For more information about customizing the AddThis toolbox, please checkout the Rendering Link Decoration section of the Client API. We also have the complete list of Services, which might come in handy.

This example works best in the lastest browsers, like IE8, Chrome, and Firefox.