Hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Fancybox3

Template của các bạn đang sử dụng không có hiệu ứng popup lightbox? Hoặc có nhưng các bạn không thích hiệu ứng đấy nữa? Vậy các bạn hãy thử sử dụng hiệu ứng thông qua thư viện Fancybox nhé.

Hiệu ứng popup lightbox là gì?

   Như đã nói ở bài Tạo trang album ảnh cho Blogspot với thư viện LightgalleryJS. Hiệu ứng popup Lightbox cho ảnh chính là hiệu ứng mà khi các bạn nhấp vào một tấm ảnh nó sẽ hiển thị ra một cửa sổ popup để hiển thị kích thước thật của ảnh đó từ việc sử dụng một plugin trong jQuery. Thường dùng cho các website có sử dụng nhiều ảnh mà trong bài. Giải thích ngắn gọn hiệu ứng popup lightbox là một thư viện JavaScript hiển thị hình ảnh và video bằng cách lấp đầy màn hình và làm mờ phần còn lại của trang web.

Tại sao các bạn nên sử dụng Fancybox cho blog của mình?

   Bởi vì nó đã quá nổi tiếng và quen thuộc, đã rất nhiều trang web với các nền tảng sử dụng. Hơn thế nữa, nó dễ sử dụng không phải cấu hình nhiều chỉ cần chèn link thư viện css và script của fancybox. Không làm ảnh nhiều hưởng đến tốc độ tải trang hay vỡ bố cục Blog của các bạn vì cơ chế khi bạn click vào ảnh thì thẻ body mới được thêm class của fancybox để hiện thị lightbox.

   Các bạn có thể click vào ảnh bất kỳ trong các bài viết trên Blog của mình để xem hiệu ứng popup lightbox cho ảnh bài viết trong blogspot với thư viện Fancybox3 nhé.

Tạo hiệu ứng popup lightbox cho ảnh bài viết trong blogspot với thư viện Fancybox3

   Các bạn chỉ việc vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML sau đó copy và dán toàn bộ code bên dưới vào trước thẻ </body> lưu Template lại là xong.

<!-- Lightbox with Fancybox3 -->

<b:if cond='data:view.isSingleItem'>

  <link href='https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css' rel='stylesheet'/>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

  <script src='https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js'/>

  <script>//<![CDATA[

    $('.post-body img').each(function() {

      var img_link = $(this).attr('src')

      $(this).wrap('<a href='+ img_link +' data-fancybox="gallery"></a>')

    })

    $('.tr-caption-container').each(function() {

      var caption = $(this).find('.tr-caption').text()

      $(this).find('a').attr('data-caption',caption)

    })

  //]]></script>

</b:if>

<!-- Lightbox with Fancybox3 -->

   Theo như khuyến cáo Fancybox sẽ không hoạt động nếu thiếu link thư viện jquery tối thiểu 1.9 trở lên và hoạt động tốt nhất với version 3 trở lên. Tuy nhiên mình đã áp dụng trên Template chỉ có link thư viện jquery 1.7 nhưng vẫn hoạt động tốt. Các bạn có thể kiểm tra trước xem có xung đột gì không. Có thể xóa bỏ link thư viện jquery trong code để tránh xung đột cũng như hiệu xuất tải trang.

***Lưu ý: Trường hợp Template đã có hiệu ứng Lightbox, các bạn đừng quên tắt hiệu ứng hộp đèn mặc định của Blogger tại trang quản trị Blogger -> Cài đặt -> Bài Đăng -> Tắt nút "Hộp đèn hình ảnh"

   Các bạn xem qua video mình làm chậm từng bước để dễ thực hành hơn nhé!

   Chúc các bạn thành công!