Post #124 border, #125 caption, #126 gallery done. Now lightbox: click image → dark background + big popup, click outside closes. Like Instagram, pro.

In Post #127, add lightbox to Blogger - works with Post #126 gallery.

Step 1: Add Lightbox CSS + JS Once in Theme

  1. Blogger → Theme → Edit HTML
  2. Find ]]></b:skin> paste CSS above it:
/* Lightbox Post 127 */
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;box-sizing:border-box;}
.lightbox.active{display:flex;}
.lightbox img{max-width:90%;max-height:90%;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.5);}
.lightbox-close{position:absolute;top:20px;right:30px;color:#fff;font-size:32px;cursor:pointer;font-weight:bold;}
.gallery img{cursor:zoom-in;}
  1. Find </body> paste JS above it:
<!-- Lightbox HTML Container -->
<div class="lightbox" id="lightbox" onclick="closeLightbox()">
<span class="lightbox-close" onclick="closeLightbox()">&times;</span>
<img id="lightbox-img" src="" alt="Enlarged" />
</div>

<script>
// Lightbox Post 127
function openLightbox(src){
  document.getElementById('lightbox-img').src = src;
  document.getElementById('lightbox').classList.add('active');
  document.body.style.overflow='hidden';
}
function closeLightbox(){
  document.getElementById('lightbox').classList.remove('active');
  document.body.style.overflow='';
}
document.addEventListener('DOMContentLoaded', function(){
  document.querySelectorAll('.gallery img, .post-body img').forEach(img=>{
    if(!img.closest('a')){
      img.addEventListener('click', function(){ openLightbox(this.src); });
    }
  });
});
</script>
  1. Save theme

Step 2: How It Works?

No HTML needed in post now. After Step 1, all images in .gallery and .post-body img auto lightbox on click.

Action Result
Click any image in post or gallery Dark overlay + big image popup
Click outside image or X Closes popup
Press Esc Closes (add below)

Step 3: Add Esc Key to Close (Optional but Pro)

Add this inside same script tag above </script> before closing:

document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeLightbox(); });

Step 4: Gallery + Lightbox Combo (Best Setup)

Use Post #126 + #127 together - final gallery with lightbox:

<div class="gallery gallery-3">
<img src="IMAGE1.jpg" alt="Template 1 - Click to enlarge" />
<img src="IMAGE2.jpg" alt="Template 2 - Click to enlarge" />
<img src="IMAGE3.jpg" alt="Template 3 - Click to enlarge" />
</div>
<p style="font-size:12px;color:#666;text-align:center;">Click image to enlarge</p>

Step 5: Disable Lightbox for One Image?

If you have logo or icon you don't want lightbox, add class:

<img src="LOGO.jpg" class="no-lightbox" alt="Logo" />

And add this JS line inside DOMContentLoaded after querySelectorAll: exclude .no-lightbox

document.querySelectorAll('.gallery img:not(.no-lightbox), .post-body img:not(.no-lightbox)').forEach...

Step 6: Test

  1. Open any post with images on mobile + desktop
  2. Click image → Should enlarge popup
  3. Click outside → Should close
  4. Check PageSpeed: No external library, only 15 lines JS = 100% fast

Post #127 Complete - Images now have pro lightbox.

Next Post #128 from your CSV: How to Add Comment System in Blogger - improve comments, reply, moderation.