Tạo Tính Năng Fancybox Cho Hình Ảnh Trên Blogger

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á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'/>{codeBox}

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

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>{codeBox}
 

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>{codeBox}