Hiệu ứng Easy Zoom cho ảnh trên Blogspot bằng JQuery

Điểm 4.6/5 dựa vào 87 đánh giá

(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

15 nhận xét

  1. 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ẻ!

    Trả lờiXóa
  2. 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.

    Trả lờiXóa
  3. 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!

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

    Trả lờiXóa
  5. 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!

    Trả lờiXóa
    Trả lời
    1. 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ì?

      Xóa
  6. 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!

    Trả lờiXóa
    Trả lời
    1. 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é

      Xóa
  7. 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!

    Trả lờiXóa
    Trả lời
    1. 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é

      Xóa
    2. 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!

      Xóa
    3. Chúc mừng em và cảm ơn em nhé :)

      Xóa
  8. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  9. 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!

    Trả lờiXóa
    Trả lời
    1. Em đã có tải file JS về theo cách anh đã nói ở trên không?

      Xóa