Try Advanced Blogger Templates Search >> 
Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.
How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger.
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.
Go To your blogger dashboard, layout >> Edit html >>
And find this code,
]]></b:skin>
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(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) 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.
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
Now we finished editing template, Click Save template,
And lets see the next step.
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>
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.
Click Here To See Demo Blogger Gallery
Please share and leave comments if you find it useful.
To become IT networking professional, you can go for ccent certification which will give you title of Cisco certified entry networking technician while ccde will entitle you certified design expert and ccna will enhance your expertise as a certified network associate.
Related Tricks & Tutorials
About The Author
Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here
very nice i like that
thanks jameswied
great, but on click function is not working , neither its working on j-quary, waiting for help.
thnx
hi Furrukh Shahzad
what you mean by “on click function”
i wanted to open another page when i click on the pic but it did not work
yes am trying the same thing but i cant get it to work ,it would be really nice if you could help us i seen other do it but i can manage to do it my self , when ever i clic nothing happens , i change it to this :
//Swap Image on Click
$(”ul.thumb li a”).click(function() {
var mainImage = $(this).attr(”href”); //Find Image Name
var url = $(this).attr(”title”);
$(”#main_view img”).attr({ src: mainImage, onClick : “window.open(’” + url +”‘);” });
// $(”#main_view img”).attr({ src: mainImage, onClick : “location.href=’” + url +”‘;” }); //
return false;
});
});
i can clic on and it will open a new window with the url i have , but the images dont grow anymore
PLEASE HELP
Furrukh: In order for the link to work you have to remove ‘return false;’ from the end of the script
Thank you angel vaxali i been checking this page 5 times a day since i posted my comment which is still in “Your comment is awaiting moderation.” for the answer thank you
Bundle of thanks dear angela, i was visiting the page again n again to find the solution, thnx a lot
hi all, sorry for being late, special thanks for Angela Vaxali
I need more than 3 pictures in the row. How to add more. Thank you.
hi Shap, please find this part in the above code and change it to a higher number,
for example, change it to
how to open the zoom image in new window when clicked
@ kakani and Sultan, Make the image url linked to a larger image and please read the previous comments to know how to enable clicking on the images.
Hi same nice trick its working … but tell me one thing . how to open the zoom image in new window.
open image in new window while u zoom
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage ,onClick :"location.href='" + url +"';" });
return false;
});
});
Awsm!
@ Abijah Gupta, thanks dude,
Hi there, i already read the previous comment but i still dont get it. where do i actually put in the code? at the template or at the html gadget?
whahaha i know where it is already! THANKS A BUNCH GUYS!!!!
so sorry for dropping by a lot of comment, but i promise this is the last if i could get it right.
1.how do you make it ‘open in a new window/tab’ when you click the image
2.how change the thumb pic to center instead of being at the left? i tried change the position but it just wont do
thanks in advance =)
This may be a stupid question, but is there any way to put this in an actual post? I want to make a static page gallery you see.
Thanks,
Sarah
Hey, I can’t seem to find the HTML/Javascript it seems whenever i go onto add new widget it just takes me to a screenshot of my Dashboard.
aaahhh…heeelp pleaseee!
Thank-you!
Thank you, that’s a very nice post… but can this be used inside a post?
Everything seems to be working excepting for the zoom I copied the code exactly as it says… what could be wrong?
@ Daniel Chiam, i the answer for your first question is easy, just add this part
to the second step code,
so it’ll be looks like the following :
And about your second question, i don’t understand it.
@ Sarah, Kooritsuki,you question is not as you say, i didn’t try it, why don’t you just try.
@ squifflett,actually this is impossible.
@ Tinai think it’s your browser problem or your blog have alot of content and pictures.
haha i love this one..cHECK my blog..hover avril lavigne images and youll see it works!!
Gosh it works like a charm! *KISS
Thanks YaniLavigne and elly
This has been so helpful! one question. How do you change the size of the thumbnail?
@ cara, please change the values of the following parts in the above code,
how can i show 4 picture in one row??
sorry i want to ask this..
why click function not working..
help me..
Your Comment Here …. * Hi,
Can I directly use the javascript in my blog? Are there any licensing issues ?
Please let me know
Thanks
Sana
Hello, i tried to use your script with the slimbox_4Blogger.js (unfortunately it is configured for moo tools) and they don’t seem to get along… If i put both of them i get in slimbox_4Blogger.js that window.addEvent(‘domready’, Lightbox.init.bind is not a function..
That was the last command in the file (“window.addEvent(‘domready’, Lightbox.init.bind(Lightbox));”
Well in the post should be mentioned that tis widget DO NOT WORK WITH .jpg FILES, but with .gif works fine.
I having issues getting the thumbnails to work in blogger. Also when attempting to use the code on a blogger page, the HTML interpretor rearranges the tags attributes for img src to img alt. I like the idea but I’m having trouble with the execution on my end. Any suggestions? Thanks in advance.
hi Thanks a lot lot lot lot.. i did in my site i am very happy. please add more like this good service.. bye bye god bless you
this may be a really dumb questions but my img url where do I get that?
@ hakim you can do it by increase the width, please check out the comment above your comment. And about the clicks, please check out the previous comments.
@ Sanathis is not my work, i found this java code and i wrote this tutorial about how to use this java in a blogger blog, i don’t have the right to give you this permission.
@ Marius sorry but i don’t understand you.
@ Kahotep you said that you can’t use it in blogger, sorry but it works with hundred of other bloggers. please follow the steps carefully and make sure that you copy all the code.
@ saisayanthanks very much for your really nice comment.
@ laura you can copy your image url from your browser address bar, or you can upload the image at any hosting service and they will give you the url, or just right click on the image and choose properties and you’ll see the image url, copy it. i wish you’ll do it easily.
Hi Max, I have just added the Image gallery widget to my blog. I dont know what mistake I might be making because I am unable to see the pictures and can only see the table layout. It is located at the bottom of my blog. Can you please help. thanks
@ Srimathi , I visited your blog. but i cant see the widget, anyway, please make sure that you type your images right URL.
Hi, do you know how to make slideshow image like in template “matapat”, “milano” or “greenharmony” ??? thnx anyway..
muchas gracias, gracias a los comentarios para solucionar el problema los clics, ya solucione la galeria, muchas gracias
Good work,
Nice Gallery,
thanks