Xem ảnh bài viết dạng Popup bằng FancyBox trong WordPress

🗣 Bài viết đăng bởi Pinker vào lúc 10-05-2022 và cập nhật lúc 11-05-2022 👁 2266 lượt xem
Fancybox Wordpress

Mặc định ảnh trong bài viết trên WordPress sẽ chỉ hiển thị ở dạng bình thường. Bạn muốn hình ảnh khi click vào sẽ nổi lên dạng popup để xem cho tiện hoặc là muốn cho nó đẹp hơn, thì có thể sử dụng thư viện FancyBox. Trong bài viết này tôi sẽ hướng dẫn cách làm popup ảnh bằng Fancybox trong WordPress đơn giản chỉ với vài dòng code, không cần phải cài plugin.

Sau khi làm xong trông nó sẽ như thế này, các bạn có thể xem thử tại bài này.

Popup Hình ảnh
Popup Hình ảnh

Nội dung bài viết

Giới thiệu

Fancybox là một thư viện jQuery rất phổ biến và nổi tiếng trong giới website, dung lượng rất nhẹ và dễ dàng cài đặt cho ứng dụng web. Fancybox ra mắt lần đầu tiên từ năm 2010 với Fancybox version 1.3.4 đến nay đã là Version 4. Fancybox giúp bạn tiết kiệm thời gian và giúp dễ dàng tạo các cửa sổ lớp phủ đẹp, hiện đại có chứa hình ảnh, iframe, video hoặc bất kỳ loại nội dung HTML nào. Đây là thế hệ thứ 4 của Fancybox và mang rất nhiều tính năng mới.

Hướng dẫn

Để áp dụng Fancybox trong WordPress thì bạn chỉ cần copy đoạn code sau và dán vào functions.php. Hiện tại tôi đang áp dụng trên theme Flatsome, nếu các bạn sử dụng theme khác mà không áp dụng được, có thể để lại bình luận phía bên dưới.

<?php
function enqueue() {
    wp_enqueue_style('vdh-fancybox', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css', array(), false, false);
    wp_enqueue_script('vdh-fancybox', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js', array('jquery'), false, false);
}
add_action('wp_enqueue_scripts', 'enqueue' );

function vdh_fancybox() {
    ?>
        <script>
            jQuery(document).ready(function(){
                Fancybox.bind(".blog-single .single-page img", {
                    Image: {
                        zoom: false,
                    },
                });
            })
        </script>
    <?php
}
add_action('wp_footer', 'vdh_fancybox');
?>

Nó sẽ mặc định lấy tất cả ảnh của thẻ <img/> chứa trong phạm vi của class .blog-single .single-page để áp dụng popup. Vì hình ảnh trong bài viết WordPress có cấu trúc riêng và không tiện can thiệp sâu vào được nên chưa khai thác được hết công năng của FancyBox. Nhưng với nhu cầu như trên cũng là khá ổn rồi, với bài viết sau tôi sẽ hướng dẫn chuyên sâu hơn (nếu có thể).

5/5 - (4 bình chọn)

Bài viết khác

Tổng hợp Download Plugin - Theme cho WordPress : Xem ngay
Nhóm Zalo : Tham gia ngay
TAGS: CÀI ĐẶT FANCYBOX CÀI ĐẶT FANCYBOX WORDPRESS FANCYBOX FANCYBOX CONTENT IMAGE WORDPRESS FANCYBOX PLUGIN FANCYBOX WORDPRESS HƯỚNG DẪN SHOW ẢNH FANCYBOX TRONG WORDPRESS PLUGIN WORDPRESS SHOW ẢNH POPUP FANCYBOX

One thought on “Xem ảnh bài viết dạng Popup bằng FancyBox trong WordPress

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Hotline Zalo Giới thiệu
0986.209.305
Zalo
Giới thiệu

Nội dung bài viết

Nội dung bài viết