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/[email protected]/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/[email protected]/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/[email protected]/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.

10 Comments

Add a Comment

Your email address will not be published. Required fields are marked *