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

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

Bạn đang xem: 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

Xem thêm: ThemeWiki – Blog Chia Sẻ Template Blogger Miễn Phí

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

Xem thêm: Cách mới nâng cấp nhận xét Blogger lên phiên bản mới

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

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


Nguồn: https://www.bloghong.com
Danh mục: Thủ Thuật Blogspot