[Blogger] Hướng dẫn tích hợp tiện ích xem ảnh Fancybox cho blogspot

Chào các bạn, ở bài viết trước tôi đã giới thiệu trình xem ảnh lightGallery cho blogspot. Và để tiếp nối chủ đề này, hôm nay sẽ tiếp tục 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

Trước tiên bạn xem demo và tùy chỉnh code tại đây

 DEMO
Như thường lệ bạn phải tắt chế độ hiển thị lightbox mặc định của blogger

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. Ngoài ra fancybox còn rất nhiều thứ để cho bạn mày mò khám phá (xem thêm tại fancybox docs) nhưng để giúp bạn dễ hiểu và thực hiện nhất tôi xin phép không trình bày dài dòng thêm

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