"Hiệu ứng Easy Zoom cho ảnh trên Blogspot bằng JQuery"
(Traidatmui.com) – Một hiệu ứng dành cho hình ảnh trên blog cũng khá thú vị đó là hiệu ứng có tên là Easy Image Zoom. Và làm sao để có thể ứng dụng hiệu ứng này cho hình ảnh trên Blogspot? Vâng mình sẽ giúp bạn tạo hiệu ứng này cho ảnh trên Blogspot. Bạn xem Live Demo bên dưới.
Hình ảnh minh họa
» Bắt đầu thủ thuật1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/easyzoom.js"></script>
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/easyzoom.js"></script>
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>
5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
#easy_zoom{
width:550px; /* độ rộng của khung chứa ảnh lớn*/
height:400px; /* chiều cao của khung chứa ảnh lớn*/
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:60px; /* khoảng cách của khung so với phía trên*/
left:380px; /* khoảng cách của khung so với phía bên trái*/
overflow:hidden;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
box-shadow:0 0 10px #777;
}
width:550px; /* độ rộng của khung chứa ảnh lớn*/
height:400px; /* chiều cao của khung chứa ảnh lớn*/
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:60px; /* khoảng cách của khung so với phía trên*/
left:380px; /* khoảng cách của khung so với phía bên trái*/
overflow:hidden;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
box-shadow:0 0 10px #777;
}
6. Save template lại
Bây giờ để sử dụng hiệu ứng này cho ảnh nào đó trên blog thì bạn sử dụng code bên dưới, có thể ngay trong bài viết hay trong các Widget trên Blogspot.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlJcSwvj0HJcBPIqU5vFEjYS7y14lmcSziGVrL0eeWaSFshQCZWkXHmLC6UUdMAeyKmOk1VDf39zZZtkVocYyTPMNbV_QuYUqkQjdqbC5DPamirT6qQy4LVvfn0rghd9y46GunZgdrK1P/s640/2009_11_21%5E13_31_42.jpg" class="zoom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlJcSwvj0HJcBPIqU5vFEjYS7y14lmcSziGVrL0eeWaSFshQCZWkXHmLC6UUdMAeyKmOk1VDf39zZZtkVocYyTPMNbV_QuYUqkQjdqbC5DPamirT6qQy4LVvfn0rghd9y46GunZgdrK1P/s640/2009_11_21%5E13_31_42.jpg" width="200px" height="180px"/></a>
Bạn thay link ảnh ở trên thành link ảnh của bạn, bạn có thể tùy chỉnh lại độ rông (width="200px") và chiều cao (height="180px") của ảnh thumbnail lại theo ý bạn.
Địa chỉ bài viết: http://www.traidatmui.com/2011/05/hieu-ung-easy-zoom-cho-anh-tren.html#ixzz2YBB6QTS9
Nguồn: TRAIDATMUI.com
0 nhận xét :
Đăng nhận xét