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ậ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://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
Chuyên mục:
Blogspot cơ bản
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
![Phim Đánh Cắp Trái Tim [94/94 Tập] Trọn Bộ Online](http://2.bp.blogspot.com/-jFj5M99idL0/ToQTwpAPAPI/AAAAAAAAAZ0/2GUybRFN-cQ/s72-c/Phim+%25C4%2590%25C3%25A1nh+C%25E1%25BA%25AFp+Tr%25C3%25A1i+Tim+VTV3+Online.jpg "Phim Đánh Cắp Trái Tim [94/94 Tập] Trọn Bộ Online")
Chào traidatmui!
Trả lờiXóaBạ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ẻ!
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óaBạn trả lời thật kịp thời.
Trả lờiXóaCám ơn TDM nhiều!
Chúc bạn cuối tuần thật vui!
Bác có đến 8 sitelinks, hôm nào rảnh chia sẻ kinh nghiệm seo nhé :)
Trả lờiXóaChao Anh Trai Dat Mui,
Trả lờiXóaAnh 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!
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óaChao anh Trai Dat Mui,
Trả lờiXóaCả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!
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óaDa!
Trả lờiXóaĐâ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!
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é.
XóaEm nhấn nút "Trả lời" ở trên để comment được liên tục nhé
Ok, Em đã làm được rồi. Cảm ơn Anh Trai Dat Mui rat nhieu!
XóaChúc anh luôn thành công và hạnh phúc!
Chúc mừng em và cảm ơn em nhé :)
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaAnh Trai Dat Mui oi!
Trả lờiXóaAnh 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!
Em đã có tải file JS về theo cách anh đã nói ở trên không?
Xóa