How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger



STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

]]></b:skin>
And immediately before it, paste this code:
/* Blogger Zoom Gallery By AllBlogTools.com */ul.thumb {float: left;list-style: none;margin: 0; padding: 10px;width: 360px;}ul.thumb li {margin: 0; padding: 5px;float: left;position: relative; /* Set the absolute positioning base coordinate */width: 110px;height: 110px;}ul.thumb li img {width: 100px; height: 100px; /* Set the small thumbnail size */-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */border: 1px solid #ddd;padding: 5px;background: #f0f0f0;position: absolute;left: 0; top: 0;}ul.thumb li img.hover {background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effectborder: none; /* Get rid of border on hover */}




Now find this code in the template:
</head>
And immediately before it, paste this code:
<script src='http://code.jquery.com/jquery-latest.js'type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){//Larger thumbnail preview$(&quot;ul.thumb li&quot;).hover(function() {$(this).css({&#39;z-index&#39; : &#39;10&#39;});$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop().animate({marginTop: &#39;-110px&#39;,marginLeft: &#39;-110px&#39;,top: &#39;50%&#39;,left: &#39;50%&#39;,width: &#39;174px&#39;,height: &#39;174px&#39;,padding: &#39;20px&#39;}, 200);} , function() {$(this).css({&#39;z-index&#39; : &#39;0&#39;});$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop().animate({marginTop: &#39;0&#39;,marginLeft: &#39;0&#39;,top: &#39;0&#39;,left: &#39;0&#39;,width: &#39;100px&#39;,height: &#39;100px&#39;,padding: &#39;5px&#39;}, 400);});//Swap Image on Click$(&quot;ul.thumb li a&quot;).click(function() {var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name$(&quot;#main_view img&quot;).attr({ src: mainImage });return false;});});</script>



Now click Save Template






Step 2. Adding The Gallery To your template.

Go to Layout >> page elements and on your template’s sidebar, header or footer Click on ‘Add a Gadget‘.
then Select HTML/Javascript
A new window will appear, in title box Type your gallery title, and in content area Copy and Paste the next code




<ul class="thumb"><li><a href="#"><img src="picture 1 Link" alt="" /></a></li><li><a href="#"><img src="picture 2 Link" alt="" /></a></li><li><a href="#"><img src="picture 3 Link" alt="" /></a></li><li><a href="#"><img src="picture 4 Link" alt="" /></a></li></ul>


Now click Save 





Then instead Of picture 1 Link Type Your Image Url,


and if you want to make the image link to another page or url instead of # Add the target url.
Each time you want to add a new image to the gallery, just repeat this code.
<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>
That’s it.

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes