Nice photo gallery using jQuery and zoom effect

Nice photo gallery using jQuery and zoom effect

Wednesday, November 02, 2011 | Posted by ArtisTutor | Edit Post

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.

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email