[blog]
Hướng dẫn cài đặt hiệu ứng Zoom ảnh cho blogspot bằng thư viện JavaScript thay cho hiệu ứng hộp đèn mặc định của blogger.
Nếu các bạn không thích hiệu ứng hộp đèn mặc định của blog thì bạn có thể sử dụng thư viện JavaScript bên dưới.
Demo: Các bạn rê chuột vô hình ảnh trên bài viết này
Thư viện cần dùng để tích hợp là: medium-zoom 1.0.5 phiên bản mới nhất
- Đầu tiên các bạn tắt chức năng Hiển thị hình ảnh với hiệu ứng Hộp đèn của blog ở mục Bài đăng, nhận xét và chia sẻ
Bước tiếp theo các bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> là lưu lại là xong, sau đó các bạn vô bài viết của blog để kiểm tra
Link code: https://drive.google.com/file/d/1MowgeVr8GnGRhM2PcTFuRn3sIbSJGqhs/view?usp=sharing
Hoặc link trực tiếp
<b:if cond="data:blog.pageType in {"static_page","item"}">
<script src='https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {$('.post-body a[imageanchor]').click(function(e) {e.preventDefault()})})
mediumZoom('.post-body a[imageanchor] > img');
//]]>
</script>
</b:if>
Với code này thì khi chèn thêm async='async' thì link js nó không hoạt động, nên mình dùng code thứ 1.
Nguồn tham khảo: junookyo
[/blog]