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

Sunday, May 9, 2010 | Tags: blogger tricks and hacks

Digg it | Stumble it | Save to Del.ico.us

If you want to add a very attractive gallery to your blog you should read this tutorial,
Through this tutorial, only 3 steps you’ll be able to make your own gallery widget with jQuery, to add it for your blogger blog,

you add add it to header, sidebar, above posts area, on footer columns, and any where else on your template,
So let’s see step one.

Step 1. Adding The Gallery Codes To Your Template.

Go To your blogger dashboard, layout >> Edit html >>
And find this code,

]]></b:skin><font color="#009900"><strong></strong></font>

]]>

And Before it, Add the next 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bWCHMI1Dl4Vw-3gGIoSND16Ca0b4Oj1MU4Pk75PuJc_uERl6Pc455yLrxyHbmpFMXNol3ikF5b9yqAqbJ-6DndsOfx_de3jHxf66tAcnFs76J6SllkIQijWMrJgkeGmNJkA5JS_McF5d/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Then Find this Tag

</head>

And add the next code before it.

<<span class="IL_AD" id="IL_AD5">script</span> src='http://code.jquery.com/jquery-latest.js'<br>type='text/javascript'/><br><script type='text/javascript'><br>$(<span class="IL_AD" id="IL_AD3">document</span>).ready(function(){<br><br>//Larger thumbnail <span class="IL_AD" id="IL_AD1">preview</span><br><br>$("ul.thumb li").hover(function() {<br>$(this).css({'z-index' : '10'});<br>$(this).find('img').addClass("hover").stop()<br>.animate({<br>marginTop: '-110px',<br>marginLeft: '-110px',<br>top: '50%',<br>left: '50%',<br>width: '174px',<br>height: '174px',<br>padding: '20px'<br>}, 200);<br><br>} , function() {<br>$(this).css({'z-index' : '0'});<br>$(this).find('img').removeClass("hover").stop()<br>.animate({<br>marginTop: '0',<br>marginLeft: '0',<br>top: '0',<br>left: '0',<br>width: '100px',<br>height: '100px',<br>padding: '5px'<br>}, 400);<br>});<br><br>//Swap Image on Click<br>$("ul.thumb li a").click(function() {<br><br>var mainImage = $(this).attr("href"); //Find Image Name<br>$("#main_view img").attr({ src: mainImage });<br>return false; <br>});<br><br>});<br></script><br>

Now we finished editing template, Click Save template,
And lets see the next step.

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"><br><li><a href="<font color="#66ccff"><b>#</b>"</font>><img src="<font color="#66ccff"><b>picture 1 Link</b></font>" alt="" /></a></li><br><li><a href="<font color="#66ccff"><b>#</b>"</font>><img src="<font color="#66ccff"><b>picture 2 Link</b></font>" alt="" /></a></li><br><li><a href="<font color="#66ccff"><b>#</b>"</font>><img src="<font color="#66ccff"><b>picture 3 Link</b></font>" alt="" /></a></li><br><li><a href="<font color="#66ccff"><b>#</b>"</font>><img src="<font color="#66ccff"><b>picture 4 Link</b></font>" alt="" /></a></li><br></ul><br><font color="#009900"><strong></strong></font>

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="<font color="#66ccff"><b>URL 1 #</b>"</font>><img src="<font color="#66ccff"><b>picture 1 Link</b></font>" alt="" /></a></li><br>

and walla That’s it.