Thủ thuật tạo hiệu ứng Zoom ảnh blogspot bằng thư viện jQuery

Hướng dẫn tạo hiệu ứng Zoom ảnh bằng thư viện jQuery cho blogspot, nếu như các bạn chán hiệu ứng hộp đèn của blogspot thì có thể sử dụng bằng hiệu ứng zoom ảnh khác như sau.

Trước tiên các bạn vô Cài đặt - Bài đăng và nhận xét

Tắt chức năng hiệu ứng hộp đèn đi, sau đó các bạn copy toàn bộ code dưới dán trước thẻ đóng </body> và lưu lại là xong.

<b:if cond='data:view.isSingleItem'>

    <script async='async' src='https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js' />

    <script>

        //<![CDATA[

        window.addEventListener('load', function() {

            jQuery(document).ready(function($) {

                $('.post-body a[imageanchor]').click(function(e) {

                    e.preventDefault()

                })

            })

            mediumZoom('.post-body a[imageanchor] > img');

        })

        //]]>

    </script>

</b:if>

Như hiệu thì blog của bạn không còn dùng hiệu ứng hộp đèn mà sẽ dùng hiệu ứng zoom ảnh bằng thư viện trên.

Chức năng hoạt động của thư viện zoom ảnh như sau: Ảnh nhỏ sẽ được phóng to hơn một xíu, ảnh lớn hơn màn hình sẽ được phóng lên (lớn hoặc nhỏ) thu gọn tất cả hình nằm trên màn hình.

Tùy vào phiên bản 1 hoặc 2 các bạn thay đổi Class .post-body cho phù hợp với từng template, thẻ .post-body là class bao quanh bài viết, mặc định phiên bản 1 là .post-body  phiên bản mới có thể có hoặc không có hoặc là một class khác.