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

5/5 - (1 bình chọn)
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
đ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ạn Đang Xem: Cài Đặt Tính Năng Fancybox Trên Blogger/Blogspot

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

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

Xem Thêm : Hướng Dẫn Cách Tạo Sitemap Cho Blogspot

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
</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.

———————————–


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