Tutorial: simple jQuery social Media Plugins
Social Media is the invincible part of our life. Every business whether small or big is doing its best to spread a word about its activities through Social Media. jQuery offers various solutions in form of plugins and widgets that are really helpful.
In this post is we have tutorial about jquery Social Media and you can use it in your web site for make inspiration web design. Please have a look.
Before you want to design Social Media and tooltip style you need to download jquery plugin , tooltip style and icon social network.
HTML
First we need to markup html code between <body> and add some script for animation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple jQuery Social Media Plugins</title> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Oswald' type='text/css'> <script src="asset/jquery-1.7.2.js"></script> <script type="text/javascript" src="asset/jquery.tipsy.js"></script> </head> <body> <div id="header"> <a href="http://1stepwebdesign.com/" class="blue button">« Back to Home</a><a href="http://1stepwebdesign.com/tutorial/tutorial-3d-css-text-fade-with-transition" class="blue button">Back to Tutorial »</a></div> <div id="demo"> <h2>simple jQuery Social Media Plugins</h2> <ul class="icons"> <li><a href="https://plus.google.com" title="Google Plus"><img src="asset/1.png"></a></li> <li><a href="http://facebook.com" title="Facebook"><img src="asset/2.png"></a></li> <li><a href="twitter.com" title="Twitter"><img src="asset/3.png"></a></li> <li><a href="http://www.linkedin.com" title="Linkedin"><img src="asset/4.png"></a></li> <li><a href="flickr.com" title="Flickr"><img src="asset/5.png"></a></li> <li><a href="http://digg.com" title="Digg"><img src="asset/6.png"></a></li> <li><a href="www.feedburner.com/" title="Feed"><img src="asset/7.png"></a></li> </ul> </div> </body> </html>
CSS
Now we start working social network layout and tooltip design
<style type="text/css">
*{ margin:0px; padding:0px;}
#demo{ padding-top:80px;margin:auto; width:640px; text-align:center;}
.icons{ padding-top:100px; width:100%; text-align:center;}
.icons li{float:left; list-style:none;}
.hover{position:absolute; overflow:hidden;width:100%;height:100%;}
.tipsy { padding: 5px; font-size: 14px; position: absolute; z-index: 100000; }
.tipsy-inner {width:100px; height:35px; line-height:35px; background-color: #000; font-family:'Oswald',Arial, Helvetica, sans-serif; color: #FFF; max-width: 200px; text-align: center;
-moz-box-shadow: 1px 1px 3px 0px #000;
-webkit-box-shadow: 1px 1px 3px 0px #000;
box-shadow: 1px 1px 3px 0px #727272;}
.tipsy-inner { border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.tipsy-arrow { position: absolute; background: url('asset/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
</style>
JS
Ok we got layout design with fresh social network icon, so now add some jquery script for make animation tooltip and fade on images style
<script language="javascript">
$(function(){
$('.icons a').each(function(){
$(this).find('>img').css({position:'relative'})
$(this).css({position:'relative',display:'inline-block'}).prepend('<span class="hover"></span>').hover(function(){$(this).find('img').stop().animate({opacity:0});$(this).find('span').stop().animate({opacity:1})},function(){$(this).find('img').stop().animate({opacity:1});$(this).find('span').stop().animate({opacity:0})})
var src=new Array()
src=$(this).find('>img').attr('src').split('.')
src=src[0]+'.'+src[1]
$(this).find('>span').css({background:'url('+src+')',opacity:0})
})
//tipsy
$('.icons a').tipsy({gravity: 's'});
});
</script>
Related posts:
About the author
Makara is web designer and he writing about graphic and web design, social media, blogging and freelancing and features articles on 1stepwebdesign.com
1st step web design is a web blog that aims provide to designers, bloggers and webdesigner such as useful tricks, tools,colour, tutorials and inspirational artworks.....