Lightbox cho ảnh của blogspot

Bài viết này mình sẽ hướng dẫn mọi người cách tạo lightbox cho ảnh của blogspot. Tất nhiên sẽ có anh em thắc mắc tại sao phải dùng và dưới đây là một số lý do

• Dành cho bạn nào tắt CSS và JS mặc định của blogspot
• Không muốn sử dụng JS và CSS bên ngoài
• Không phải sửa lại cấu trúc HTML các ảnh cũ trên blog
• Đoạn JS và CSS của mình rất gọn
• Thoải mái tùy biến CSS theo ý thích

CSS

.lightbox-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:999}
.lightbox-container{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:90%;text-align:center}
.lightbox-image{max-width:90%;max-height:90%;transition: transform 0.3s ease;}
.lightbox-close{bottom:-55px;right:50%;border-radius:3px;padding:5px;position:absolute;transform:translateY(-50%);width:20px;height:20px;background-color:rgb(255 255 255);color:#333;text-align:center;line-height:20px;cursor:pointer;0 0 10px rgb(255 255 255 / 50%);}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;background-color:rgb(255 255 255);color:#333;text-align:center;line-height:30px;cursor:pointer;border-radius:3px;0 0 10px rgb(255 255 255 / 50%);}
.lightbox-prev{left:-40px}
.lightbox-next{right:-40px}
.lightbox-close:hover,.lightbox-prev:hover, .lightbox-next:hover{background-color: rgb(175 175 175)}

JS

<script>
//<![CDATA[
/*
Lightbox for Blogger
Author: HuyDC
*/
document.addEventListener("DOMContentLoaded",function(){var links=document.querySelectorAll(".separator a");var overlay=document.createElement("div");overlay.className="lightbox-overlay";var container=document.createElement("div");container.className="lightbox-container";var lightboxImage=document.createElement("img");lightboxImage.className="lightbox-image";var closeIcon=document.createElement("div");closeIcon.className="lightbox-close";closeIcon.innerHTML="X";var prevButton=document.createElement("div");prevButton.className="lightbox-prev";prevButton.innerHTML="<";var nextButton=document.createElement("div");nextButton.className="lightbox-next";nextButton.innerHTML=">";container.appendChild(lightboxImage);container.appendChild(closeIcon);container.appendChild(prevButton);container.appendChild(nextButton);document.body.appendChild(overlay);document.body.appendChild(container);var imageSources=[];var currentImageIndex=0;for(var i=0;i<links.length;i++){links[i].addEventListener("click",function(e){e.preventDefault();var linkHref=this.getAttribute("href");lightboxImage.src=linkHref;overlay.style.display="block";container.style.display="block";imageSources=Array.from(links).map(function(link){return link.getAttribute("href")});currentImageIndex=imageSources.indexOf(linkHref)})}
closeIcon.addEventListener("click",function(){closeLightbox()});overlay.addEventListener("click",function(){closeLightbox()});prevButton.addEventListener("click",function(){navigateImage(-1)});nextButton.addEventListener("click",function(){navigateImage(1)});document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeLightbox()}
if(e.key==="ArrowLeft"){navigateImage(-1)}
if(e.key==="ArrowRight"){navigateImage(1)}});var startX,startY,endX,endY;container.addEventListener("touchstart",function(e){startX=e.changedTouches[0].pageX;startY=e.changedTouches[0].pageY});container.addEventListener("touchend",function(e){endX=e.changedTouches[0].pageX;endY=e.changedTouches[0].pageY;var deltaX=endX-startX;var deltaY=endY-startY;if(Math.abs(deltaX)>Math.abs(deltaY)){if(deltaX>0){navigateImage(-1)}else{navigateImage(1)}}});function closeLightbox(){overlay.style.display="none";container.style.display="none"}
function navigateImage(direction){currentImageIndex+=direction;if(currentImageIndex<0){currentImageIndex=imageSources.length-1}
if(currentImageIndex>=imageSources.length){currentImageIndex=0}
lightboxImage.src=imageSources[currentImageIndex]}})
//]]>
</script>

Lưu ý: Đoạn js tự động lấy toàn bộ nội dung trong thẻ div có class separator để tạo lightbox cho ảnh, vì thế khi đưa ảnh vào bài viết các bạn chỉ việc chọn kích thước và vị trí ảnh như bình thường, đừng thay đổi gì cả thì code mới hoạt động.