Hiệu ứng phóng to ảnh

Hiệu ứng phóng to ảnh khá bắt mắt,sử dụng  jquery, rất phù hợp cho các bộ sưu tập ảnh. Bạn có thể chèn nó vào Blog qua tiện ích  HTML/javascript một cách rất dễ dàng.Để chèn trực tiếp vào mã nguồn cũng chỉ cần 5 bước đơn giản sau:

DEMO

1. Đăng nhập Blogger --> Chỉnh sửa mẫu --> HTML

2.Tìm đến  ]]></b:skin> rồi chèn đoạn CSS sau lên trước nó.

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

Thay đổi các giá trị cho phù hợp với Blog của bạn:

3.Tìm đến dòng </head>  rồi chèn đoạn script sau lên trước nó:

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

4. Lưu mẫu lại.
5.Tìm vị trí Bạn muốn đặt những bức ảnh của mình rồi chèn vào đó đoạn mã HTML sau:

<ul class="thumb">
<li><a href="#"><img src="picture Link" alt="" /></a></li>
<li><a href="#"><img src="picture Link" alt="" /></a></li>
<li><a href="#"><img src="picture Link" alt="" /></a></li>
<li><a href="#"><img src="picture Link" alt="" /></a></li>
</ul>

Thay thế  #  với liên kết của bạn.
Thay thế  picture Link  với link hình ảnh bạn muốn hiển thị với hiệu ứng trên.