Image Bubble effets With Jquery - Now i'm posting a new tutorial for blogger using jquery, Image Bubbles Image Bubble effets With Jquery is a cool Flash-like effect that causes an image to bubble up and expand whenever the mouse rolls over it from within a series of images. It's a nice way to draw attention to an image when the mouse rolls over it. you can read this carefully on this web dynamicdrive.
Ok here i wil show you how to add this menu on your blog, please following this steps :
1. Login your blogger acount
2. Design, Edit Html
3. Save This CSS before ]]></b:skin> Section:
/* Image Bubble effets With Jquery
----------------------------------------------- */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}
.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}
.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}
#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}
#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}
#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}
4. Next step, put this java script before tag </head> Section :
<script type="text/javascript" src="http://scriptbase.googlecode.com/files/jquery1.3.2.min.js"></script>
5. And then save this script before tag </body> Section :
<script src='http://scriptbase.googlecode.com/files/imgbubbles.js' type='text/javascript'>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
})
</script>
6. Save Template
7. Last step, to apply enable the magnify effect on an image just insert this code on your Html(Posting Or Gadget) :
Orbs Image Bubble :
<ul id="orbs" class="bubblewrap">Square Image Buble :
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8cBd4YOSGqUNbRLCuDjoL3aSaLszA_fN0wPZfLQSM0pPHyGJ5TeEmajpUxmMOPI0xbsJuiS1iIqr1DdGw7sGULAvFJKJ7Z9k1NEA9Lxl_KssmpurduRf1jxCmOY2P4hruhLfLWE5xTkM/s1600/stumbleupon.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9J3tsF1yax7fGmZ1cIlM676Y3L8d4MT8IY2vPCmcGOx4hisVgqo0NVG3plx706iVqjvr7TmoQFtk0L5OjjKyQlNeyJd2rDEB3QGUe3E3A6uvNauricbmu-S2COiW79PqNVFiLneuz-PM/s1600/facebook.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivq7Abthu06hd0hNAnlaQ-NrhIW187aBeo_0gGi3S5UNkkLvVO83SGCVQoKcg93A8mZvNGcG4G2wjzP1fM1K3iy2VF1SYbQcyaCYKkjR8JuBxrxuBL1j9Lws98hNAdN3Cie_5z8y4RDqk/s1600/digg.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVqr_m8KMPlVqsG2dBCuj-JhM-SVR95qt-fPQ4FGPMzcWios4kmyBcoTOBDiegdRBeHSHLXfsJ0JtHeqrfP8S7mGe8MxBB8cnFJNJaSrD06jLJdJoSiiW0azBcCPzxuhE8lcwqSM1ehZQ/s1600/twitter.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAbY3DAf0p4RGwk58_W9FEdq68G-TaTxn76xCV1tawyL0K83Fd38Syk2FbXCi-u5iZdXCerFgP2fRdyTcAuYZddBPIldIrkkYrCpkXn_Y4oqyDXAWYO-kqDHS8w-IpnvoEkSKVvUS5WkA/s1600/rss.png" /></a></li>
</ul>
<ul id="squares" class="bubblewrap">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuwxPyKp6nav3etAwGDwcg2AxjlnaBsB0MZF0IeYDWjLf2SwNvtpaYsVe7SNV3a-eeAHeeAvjLsZV2uez2vbC6Lboc4hpxzjQbyWqUvbHcruLkQ4eDk1LSNdGAOp0meIdLwsgqDV2VQvE/s1600/facebook1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2vcQ3w7RMuMqPtnqKOdM6r7THdO_tqwLR7akUihNgnPhaAQsB6xoxyPOK1plwv2v8TpeMnqpVmoit9IjbRGUy9dsRgoMmanIkbTqS7LCZ0y7et5zVuQWocDGcjtBkEfkWzIpG-x4DYL4/s1600/delicious.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0C7cFUvLMUlMmW3eTxFxPeAgkOEn0Q5kA5Ubgy67bon_Nli2LV8zEJzEQ0o6Ae11nGrjpRr5VJY2JAsGZ8nKdwBP7x9IHz2HQH6w7Kc7ZSuQIIrqguNNKWvec4Kb30gQB7alT0RpN2AI/s1600/digg1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7RC4zb_R9n5XtNJ3gAQU5PhmFrzl1fi9yy2zoFkM0TKtzihyphenhyphen-3BGCZY6KhggfCH5m7wCuQlnB60l8c5MclkpXzUyEgtPxqDWJfZ48roAZzw9apLJgjR7IXEiOeVOk8v4sgarSapMOqg/s1600/stumbleupon1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYy_Oom9XSYf8v6oyg91NNlFzqC1ZoQr-z8SFjcQNrmeGmSSobKNtJepht_oP8squAiESxA7lBcaCgc6yKef-CeEPqwKH4OA-iCtqlzz_NfdzYqVxACC4Jh7OSNGoz45aKDw5UwhyphenhyphengbcM/s1600/rss1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVtLWtiT82TSeUf00qBZAScxA0jWyYkypBl8O8zXbyxYSLVa6BG29t7t4GIW4KcXDcCCBb_H1pi_pU7As35mP52dT7LUsK0jppTIWPTkickWLNhSYa1FWYi5hdeKhStfkyOWDbEFrbqdM/s1600/twitter1.png" /></a></li>
</ul>
8. Okay it Done, and you can Remove that image with another Icon when you will using this effect on other image... :)
0 comments:
Post a Comment