Tích hợp tiện ích xem ảnh Fancybox cho blogspot

Anh Trai Nắng
2

Hôm nay sẽ giới thiệu tới các bạn tiện ích xem ảnh Jquery Fancybox. Một lợi thế của tiện ích này là nó không load font icon tự tạo như lightGallery và code js của nó có thể load async giúp tăng tốc độ tải trang của bạn.

Tích hợp tiện ích xem ảnh Fancybox cho blogspot
Tích hợp tiện ích xem ảnh Fancybox cho blogspot

Các bạn có thể xem demo ở ngay tại các bài viết nhiều ảnh trên Blog của mình. Các bạn truy cập vào các bài viết ở mục Image để xem demo rồi quay lại thực hiện nhé!

Tại thời điểm viết bài jquery có ver 3.3.1 và fancybox có ver 3.3.5. Tích hợp jquery nếu template chưa có

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>

Tiếp theo đến js và css của fancybox đặt chúng trước thẻ </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js' type='text/javascript'/>

Đến đây để bật fancybox thủ công khi viết bài bạn có thể thêm theo cấu trúc sau:

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

Trong trường hợp bạn muốn bật cho tất cả ảnh trong bài đăng thì thêm bên đoạn js sau

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    $(".post-body a img").each(function() {
        var isImage = /\.(?:jpg|jpeg|gif|png)$/i.test($(this).parent("a").attr("href"));
        if (isImage) {
            $(this).parent("a").attr('data-src', $(this).parent("a").attr("href"));
            $(this).parent("a").attr('data-fancybox', 'postLightBox');
        }
    });
    $("[data-fancybox]").fancybox();
});
//]]></script>

.post-body a img bạn cần trỏ đúng class nhưng hầu hết Blogger template đều có nó. Đến đây là bạn đã hoàn tất fancybox.

Hi vọng thủ thuật sẽ có ích cho blog của bạn. Chúc thành công!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

2 Nhận xét

  1. Xài mấy năm rồi vẫn perfect, đt hay pc đều ổn. Lên top cho bà con thấy nào :v

    Trả lờiXóa
Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu