Nice photo gallery using jQuery and zoom effect


Today I will present you with a tutorial for creating a  photo gallery with jQuery and zoom effect. It's a pretty nice gallery and you can add it both in your posts and in a HTML/Javascript widget. Also if you want you can add it to a blog page.
It's very easy to add , the tutorial having just 3 small steps. So....

How to create nice photo galley with zoom effect?

1. Log in to your Dashboard--> Template- -> Edit HTML

 2. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

/* Blogger Zoom Gallery  */
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/AVvXsEiPSZwGPHfEMAkhU9XEKPmWk8s4CHCUY14rFQjudm5i7pOdKFNpOGUoaJugt9szFJf8oZb3fzx_GW89nuaXf_14XcJ5T7rwKG91-J_V6kdpI50sovvKH_FmxByKqu_dXJQwnM6ap4foPYns/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Change the value of the red line to change the width of the gallery.

3. Then go and find the </head> tag and before it paste the next 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>

If you have jQuery already installed on your template delete the rel line.

4. Save your template.

5. Now in the place you want your gallery to appear just 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>

Replace the blue line with the URL of your images,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 just add a new line of code like the upper ones.

Get Latest Updates For Free!

Subscribe via Email

21 comments

November 2, 2011 at 6:31 PM

Great...
I've tested it, but btw, how can we make the picture not distorted?
It's good to make the thumbnail like that (now) but it will be nicer if the image appears as its original size (or proportional to) when we zoom it...
can you make it that way?

November 2, 2011 at 7:14 PM

Ohhh great, very nice from you to post it.

I tried it here
serneikaravi.blogspot.com/2011/11/blog-post.html

but it works strange not right, is possible to see the pictures not so like you see on above link?
Thanks.

November 2, 2011 at 7:14 PM

@visionascTo make the image bigger when zoomed change the value on those lines:

width: &#39;174px&#39;,
height: &#39;174px&#39;,

change: 174px

For the images to not be distorted you must upload images with the same width and height for all of them. If you have some of the images with others dimensions they will be distorted.

For changing the small thumbnail dimension change the value of width and height on this line

ul.thumb li img {
width: 100px; height: 100px;

November 2, 2011 at 7:27 PM

@tigrisHonestly i don't know why is acting like that.
You can see here that is working just fine:

http://arttests.blogspot.com/2011/10/123.html

Try again and make sure you copy all the code needed.

November 2, 2011 at 7:31 PM

I have done it but if the images are zoomed the stay inside the frame of the small thumbnail dimension,
I chenged the dimensions of them but they look with the same dimensions!

November 2, 2011 at 7:50 PM

Yes I see on your test blog work fine, works perfect but on mine, after I tried some times I have the same result, the images are zoomed in the thumbnail frame !
I looked also all the lines of the code and I saw that are all pasted.

Thanks again.

November 2, 2011 at 7:56 PM

@tigrisTry in another blog. And if it works then is a problem with the actual one.

November 2, 2011 at 8:08 PM

Yes you are rigth, it works on another blog, it looks that does not work on templates made with the latest version of artisteer.

November 2, 2011 at 8:22 PM

@tigrisIt's working with the last version (3.1.0.45075) so another thing is causing the problem.

November 2, 2011 at 8:45 PM

Yes you have right, it is working also on the latest version, I have seen it on the probe link you gave me.
I made it on an other blog an actual blogg of me and works fine there.

November 3, 2011 at 7:20 AM

@ArtisTutorThanks I'll try it out...
;)

November 3, 2011 at 7:45 AM

Hey, I found this one, could you make a tutorial for this too?
I think this is useful...
since this image gallery would actually take many spaces (if we use it in a post), maybe this one is better for those who want to put many photos.
Here is the link :
http://www.mudaimemo.com/p/gallery/
(I tried to learn it, but I couldn't understand, lol)

November 3, 2011 at 9:35 AM

@visionascYes I will post it later this day.

Very good, cool design..

November 4, 2011 at 1:02 PM

now we can do it just use CSS3...
nice jQuery effect^^

Anonymous
November 12, 2011 at 7:27 AM

Great! thanks for the share!

Anonymous
November 16, 2011 at 6:14 AM

Great! thanks for the share!

November 17, 2011 at 11:59 AM

great

I can take the code

March 15, 2012 at 8:47 AM

Hey...Thanks so much for this tutorial..its pretty awesome.
I was trying to link the images ..but nothing happens. I add the target link instead of # as u had mentioned, but I am not directed to any link when I click on the image.
Could you please help me?

Tanya

March 16, 2012 at 12:08 PM

@Tanya VSMake sure you write the links correctly.

September 26, 2012 at 6:34 PM

I found this trick very amusing and I hope can attract my reader.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers