Photo gallery sử dụng jQuery và hiệu ứng zoom hình ảnh cho blogspot

Hôm này mình sẽ hướng dẫn các bạn một gallery ảnh với hiệu ứng zoom sử dụng jQuery.
Các bạn xem demo tại đây
Để thực hiện điều này, chúng ta cần làm 3 bước đơn giản như sau:
Tutorial How To Creat Photo Gallery With Zoom Effect

1. Đăng nhập Bảng điều khiển --> Thiết kế --> Chỉnh sửa HTML
Tìm đoạn "]]></b:skin>" ( Crl+F) và dán đoạn code sau vào trước nó:

/* Blogger Zoom Gallery by vlpm4st3r http://blogtructuyenvn.blogspot.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmuco4-euuYZiNZHtFr-goJqh8_b2grDACO5wwT6EyZOY8I4SwStWPO9K8NjwiYpbumluP76Hv0qU5r4lYi4qPd2tf45eRXAqfPQdMof4NesLBXWwUJAPotKF19n28lxalWziUAsr2KqC/) no-repeat center center;  /* Hình ảnh sử dụng để làm background cho ảnh trong hiệu ứng zoom
border: none; /* Get rid of border on hover */
}


Các bạn có thể chỉnh sửa code màu đỏ là độ rộng của gallery ảnh cho phù hợp với blog của bạn

3. Tìm thẻ </head> và dán trước nó đoạn code sau:

<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>
Xóa đoạn code màu xanh nếu blog bạn đã sử dụng jQuery

4. Lưu mẫu.
5. Sử dụng đoạn code sau để hiển thị gallery , nếu sử dụng trong bài post, các bạn nhớ chọn Chỉnh sửa HTML nhé:

<ul class="thumb">
<li><a href="#"><img src="link anh 1" alt="" /></a></li>
<li><a href="#"><img src=" link anh  2" alt="" /></a></li>
<li><a href="#"><img src=" link anh 3" alt="" /></a></li>
<li><a href="#"><img src=" link anh 4" alt="" /></a></li>
</ul>