-->

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

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


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/[email protected]/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.

3 Nhận xét

  1. Làm thêm 1 blog demo đi thớt

    Trả lờiXóa
  2. gia công chữ inox
    chữ inox
    gia cong chu inox
    chữ nổi inox
    Liên hệ với chúng tôi để được tư vấn báo giá gia công chữ:
    🌐 Website: dinhphanadvertising.com
    🔗 Fanpage: facebook.com/Quangcaodinhphan
    🔗 Group: facebook.com/groups/quangcaovanoithat
    🏠 Địa chỉ VP: 234/6 Tô Ngọc Vân, P. Linh Đông, TP. Thủ Đức, TP. Hồ Chí Minh
    ☎️ SĐT: 0947.85.0022 (Mr. Quân)

    Trả lờiXóa

Đăng nhận xét

Mới hơn Cũ hơn