Cài Đặt Tính Năng Fancybox Trên Blogger/Blogspot

Cài Đặt Tính Năng Fancybox Trên Blogger/Blogspot


FancyBox là gì?

FancyBox 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 trang web. Nó được xây dựng bằng cách sử dụng thư viện jQuery

Nó là sự kết hợp của JavaScript, CSS và một số hình ảnh cho phép bạn để tạo hiệu ứng phương thức bằng cách sử dụng khung JavaScript jQuery

Tính năng của bản FancyBox này:


  • Có trình chiếu tự động
  • Chế độ toàn màn hình
  • Thu phóng
  • Và hiển thị list ảnh

Các bước để thêm nó vào Blogger:

Trên bảng điều khiển Blogger , Chọn Chủ đề ➟ Chỉnh sửa HTML

Bước 1: Thêm thư viện  jQuery


<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js'/>

Hoặc

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

Bước 2: Thêm mã vào blog


CSS


<b:if cond='data:view.isSingleItem'>
<style>
@media screen and (max-width:640px) {
body .fancybox-slide--image{overflow-y:scroll}}
</style>
</b:if>

Tìm đến thẻ </head> và dán CSS trên vào trên thẻ </head>

Javascript


Tìm mã </body> trên blog của bạn và đặt mã bên dưới ngay trên mã </body> nhé

<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
// Lazy Fancy Box
var lazyfancybox=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyfancybox||0!=document.body.scrollTop&&!1===lazyfancybox)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyfancybox=!0)},!0);
// CSS Fancy Box
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css");
// Fancybox Setting
$(document).ready(function(){$(".post-body img").parent("a:not(.no-lightbox)").each(function(){$(this).attr("src",$(this).find("img").attr("src")),$(this).attr("data-fancybox","postimages")}),$(".post-body img").parent("a:not(.no-lightbox)").fancybox({margin:[50,0],onComplete:function(t,o){t.scaleToActual(0,0,0),console.log(t)}})});
//]]>
</script>
</b:if>

Thay thế phần bôi đỏ .post body thành class image của template mà bạn đang xài nhé.

Nếu gặp vấn đề gì hãy comment ngay bên dưới nhé. Chúc các bạn thành công.