Tích Hợp Plugin FancyBox3 Vào Blogger

FancyBox là gì ?

FancyBox3 là một công cụ để hiển thị hình ảnh, nội dung html và đa phương tiện trong một “hộp đèn” kiểu Mac nổi trên đầu trang web.

Nó được xây dựng bằng thư viện jQuery . Được cấp phép theo cả giấy phép MIT và GPL

Xin chào các bạn hôm nay tiện tích hợp hiệu ứng phóng to ảnh fancybox vào website của quangsangit.com tiện hướng dẫn cho các bạn 1 bài chi tiết tích hợp hiệu ứng phóng to hình vào website của mình! đặc biệt là rất đẹp nhé mọi người!

Hưỡng Dẫn Tích Hợp

Bạn thêm đoạn JavaScript dưới đây lên trên thẻ </body>

<!-- Lightbox with Fancybox3 -->
<b:if cond='data:view.isSingleItem'>
  <link href='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/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/fancybox@3.5.7/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 -->

Sau này nếu không sử dụng nữa bạn vào theme xóa đoạn code đã chèn đi là xong. Và lưu ý quan trọng nếu dã sử dụng lightbox trình chiếu ảnh bằng Fancybox, ban đừng quên tắt hiệu ứng hộp đèn mặc định của Blogger trong phần Cài đặt > Bài đăng, nhận xét và chia sẻ > Hiển thị hình ảnh với hiệu ứng Hộp đèn chọn Có thành Không.