Smashing Notes

Implementing A Zoom Effect Photo Gallery On Your Blog

1.  Go to your Dashboard >> Design >> Edit HTML.

2.  Find ]]></b:skin>. Before it paste the code below. (Ctrl+F and paste the code on the search bar to find it easily.)

/* 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/AVvXsEi_5UFtWCoLJ0eMJQV4YOLJS3FnDxzLcXkLms2oFf9Fc90B5A8148gvEvIUE9TNsNsIvECLQZs0JBl_3ZW-rzfAbipYy05l39VKqVw8rX-EbJdrDPIt8sTIukGHbcdOfN0mcingimjuYq61/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

IMPORTANT: You can change the value of this line "width: 360px;" 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>

IMPORTANT:  If you have jQuery already installed on your template delete the rel line in the start of the code.


4.  Now save your template.


CONFIGURATION:  In the place where you want the 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.

IMPORTANT:  In order for the image to be not distorted, you have to make the dimensions of the image the same as the dimensions in the code. Find this code "ul.thumb li img {width: 100px; height: 100px;" if you want to change the image dimensions.

If you want to add a new image just add a new line of code like the upper ones.