"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ật

1. Đă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>

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

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://lh6.googleusercontent.com/_BTztXRwC9ik/S4tj4lnAcrI/AAAAAAAAANw/vwXqEQJYh-c/s640/2009_11_21%5E13_31_42.jpg" class="zoom"><img src="https://lh6.googleusercontent.com/_BTztXRwC9ik/S4tj4lnAcrI/AAAAAAAAANw/vwXqEQJYh-c/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.

Chúc bạn thành công

Tham khảo css globe

Xem khác cùng chủ đề

15 nhận xét | Viết lời bình

5/07/2011 09:22:00 CH Trả lời

Chào traidatmui!
Bạn cho mình hỏi, hiệu ứng zoom hình như bạn đã giới thiệu ở trên có tác dụng cho tất cả các hình ảnh trên blog hay chỉ có ở những bài mà mình cài đặt riêng.
Những bài giới thiệu của bạn rất hay và bổ ích.
Cám ơn bạn về những thông tin mà bạn đã chia sẻ!

Admin
5/07/2011 10:30:00 CH Trả lời

Thủ thuật trên chỉ áp dụng riêng cho từng ảnh riêng lẻ chứ không phải cho tất cả các ảnh bạn. Nếu muốn sử dụng hiệu ứng cho ảnh nào thì bạn thêm class="zoom" vào thẻ <a> ... </a> như mình hướng dẫn như trên.

5/07/2011 10:52:00 CH Trả lời

Bạn trả lời thật kịp thời.
Cám ơn TDM nhiều!
Chúc bạn cuối tuần thật vui!

5/08/2011 08:38:00 CH Trả lời

Bác có đến 8 sitelinks, hôm nào rảnh chia sẻ kinh nghiệm seo nhé :)

10/22/2012 11:49:00 SA Trả lời

Chao Anh Trai Dat Mui,

Anh oi, Cho em hoi mot van de em gap phai la: em muon down 2 file:
jquery.min.v1.4.1.js và easyzoom.js trên trang của anh về luu trên host của em nhưng khi down về ok roi thi thay thế đường link trên host của em thì không chạy được tại sao vậy anh?
Anh có thể hướng dẫn giúp em được không anh?
Mong nhận được sự giúp đỡ của anh!Thông tin liên hệ anh có thể gửi qua mail giúp em!
Email: hoang_son403@yahoo.com

Trân trọng cảm ơn anh rất nhiều!

Admin
10/22/2012 06:11:00 CH Trả lời

Em hiện tại đang dùng host nào? và link của 2 file e tải lên host của em là gì?

10/22/2012 07:42:00 CH Trả lời

Chao anh Trai Dat Mui,

Cảm ơn anh rất nhiều vì đã hồi âm cho em!
Hiện tại em đang dùng host của google ( blogspot).
Em vào đường dẫn của anh:
1-http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js và tải về file: jquery.min.v1.4.4.js
2-http://data-traidatmui.appspot.com/scripts/easyzoom.js và tải về file: easyzoom.js
Sau đó em tiến hành up lên host của em, sau đó lấy đường dẫn trên host để thay vào đường dẫn trên host của anh. Nhưng khi vào refesh thì nó không hoat động được. Em không hiểu nó bị lỗi cái gì ?
Mong anh có thể giúp em được không?

Trân trọng cảm ơn anh!

Admin
10/22/2012 07:50:00 CH Trả lời

Em hãy cho anh đường link 2 file bên host em anh kiểm tra xem có hoạt động không nhé

10/22/2012 08:03:00 CH Trả lời

Da!
Đây là 2 đường link cua em:
http://qlsshopping.googlecode.com/files/jquery.min.v1.4.1.js
http://qlsshopping.googlecode.com/files/easyzoom.js
Anh kiểm tra giúp em!

Admin
10/22/2012 09:04:00 CH Trả lời

2 file hoạt động bình thường mà em, có phải là em copy code vào Notepad và save lại mới upload lên không? có thể sai Encoding, em nên dùng IDM để download file về và giữ nguyên tải lên và nhớ là lần sau tải phải sửa tên file khác so với file em đã upload trước nhé.

Em nhấn nút "Trả lời" ở trên để comment được liên tục nhé

10/22/2012 09:51:00 CH Trả lời

Ok, Em đã làm được rồi. Cảm ơn Anh Trai Dat Mui rat nhieu!
Chúc anh luôn thành công và hạnh phúc!

Admin
10/22/2012 10:31:00 CH Trả lời

Chúc mừng em và cảm ơn em nhé :)

10/23/2012 09:35:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
10/23/2012 09:38:00 SA Trả lời

Anh Trai Dat Mui oi!

Anh oi!, Em lại bị một lỗi khi down file: jquery.min.v1.4.1.js và file easyzoom.js về đưa lên host google code có lúc thì chạy bình thường có lúc thì k chay được ( đối với Firefox không chạy) còn đối với Chrome và Internet Explorer thì chạy rất ok không hiểu tại sao nữa? Riêng việc sử dụng script trên host của anh thì chạy bình thường còn của mình thì k chay không hiểu mình sai lỗi gi? Nếu sai thì Chrome và Internet Explorer cũng không chạy luôn chứ? Anh Trai Dat Mui có thể chỉ giáo thêm cho em được không?
Mong nhận được sự chỉ giáo của anh!
Tran trong cam ơn!

Admin
10/23/2012 10:48:00 CH Trả lời

Em đã có tải file JS về theo cách anh đã nói ở trên không?

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang