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

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.

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 !