Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

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

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

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

43,723 views

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>

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

$(&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 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">
<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.

Demo. See How is this gallery looks like on a blogger blog.

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.

Liked It ? Please Share

Comments

46 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. jameswied says:

    very nice i like that

  2. great, but on click function is not working , neither its working on j-quary, waiting for help.
    thnx

  3. i wanted to open another page when i click on the pic but it did not work

  4. valente says:

    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

  5. Furrukh: In order for the link to work you have to remove ‘return false;’ from the end of the script

  6. Valente says:

    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

  7. Bundle of thanks dear angela, i was visiting the page again n again to find the solution, thnx a lot

  8. Max says:

    hi all, sorry for being late, special thanks for Angela Vaxali

  9. Shap says:

    I need more than 3 pictures in the row. How to add more. Thank you.

  10. Max says:

    hi Shap, please find this part in the above code and change it to a higher number,

    width: 360px;

    for example, change it to

    width: 500px;
  11. kakani says:

    how to open the zoom image in new window when clicked

    • Max says:

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

  12. Sulltan says:

    Hi same nice trick its working … but tell me one thing . how to open the zoom image in new window.

  13. kakani19 says:

    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;

    });

    });

  14. Max says:

    @ Abijah Gupta, thanks dude,

  15. Daniel Chiam says:

    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?

  16. Daniel Chiam says:

    whahaha i know where it is already! THANKS A BUNCH GUYS!!!!

  17. Daniel Chiam says:

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

  18. Sarah says:

    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

  19. squifflett says:

    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!

  20. Kooritsuki says:

    Thank you, that’s a very nice post… but can this be used inside a post?

  21. Tina says:

    Everything seems to be working excepting for the zoom I copied the code exactly as it says… what could be wrong?

  22. Max says:

    @ Daniel Chiam, i the answer for your first question is easy, just add this part

     target="_blank"

    to the second step code,
    so it’ll be looks like the following :

    <a href="#" target="_blank">

    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.

  23. YaniLavigne says:

    haha i love this one..cHECK my blog..hover avril lavigne images and youll see it works!!

  24. elly says:

    Gosh it works like a charm! *KISS

  25. Max says:

    Thanks YaniLavigne and elly

  26. Cara says:

    This has been so helpful! one question. How do you change the size of the thumbnail?

  27. Max says:

    @ cara, please change the values of the following parts in the above code,

    width: &#39;174px&#39;,
    height: &#39;174px&#39;,
    
  28. hakim says:

    how can i show 4 picture in one row??

  29. hakim says:

    sorry i want to ask this..
    why click function not working..
    help me..

  30. Sana says:

    Your Comment Here …. * Hi,

    Can I directly use the javascript in my blog? Are there any licensing issues ?
    Please let me know

    Thanks
    Sana

  31. Marius says:

    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));”

  32. Modestas says:

    Well in the post should be mentioned that tis widget DO NOT WORK WITH .jpg FILES, but with .gif works fine.

  33. Kahotep says:

    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.

  34. saisayan says:

    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

  35. laura says:

    this may be a really dumb questions but my img url where do I get that?

  36. Max says:

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

  37. Srimathi says:

    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

  38. Max says:

    @ Srimathi , I visited your blog. but i cant see the widget, anyway, please make sure that you type your images right URL.

  39. initialwk says:

    Hi, do you know how to make slideshow image like in template “matapat”, “milano” or “greenharmony” ??? thnx anyway..

  40. Angel says:

    muchas gracias, gracias a los comentarios para solucionar el problema los clics, ya solucione la galeria, muchas gracias

  41. Johhny says:

    Good work,
    Nice Gallery,

    thanks

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