Add Images Gallery Widget With jQuery Hover

If want your blog look attractive, I think you should try this. This thing is very useful for you.It is the best way for you to show your photo or images to your readers. With this post, you will be glad to have your own images gallery. Follow the 10 steps below and you will be amazed!

#Step 1: You must sign in to blogger. Go to your layout and click at the Edit HTML.

#Step 2: Tick at the Expand widget template.

#Step 3: Use Ctrl+F to find this code.

Code: ]]></b:skin>


#Step 4: Paste the code below before ]]></b:skin>.

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeGAX6FW39LNnJe3bEFsS7D6DSni78nAGunM3nzeig7xWEoRV3THF_hE3JhAOrypXCy_qkJVJqTPb00cLcoBM3Wk0itUyHyM5O5viEcTkN8UofUaoBh9mehKgUImny6k5YgfjurDZddk6R/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */


#Step 5: You must use Ctrl+F again but this time you must find the tag below:

</head>


#Step 6: After you had found the </head> tag, you must paste this code before it.

<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>


#Step 7: Click at the Save template. Now, we have done editing the template. Just a few steps left.

#Step 8: After that, you need to go to your Page Elements at the Layout. Click at the Add a Gadget and choose HTML/JavaScript.

#Step 9: Paste the code below in the box appeared. Don't forget to put the title of your image gallery.

<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>


#Memo: Change the picture 1 Link in the code above with your Image Link Location and so do picture 2
Link and such as that.

     : To make the image goes to another url, you just need to replace the # with the target url. 

     : If you want to add more image, you just need to repeat the code below and paste it.

Code = <li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>


#Step 10: You just need to save it and the work is Done!!

InspiredMagz.com