Blogger'da Görsellere Lightbox Özelliği Ekleme

Normalde Blogger'da bir resme tıklandığında, tarayıcı sizi resmin doğrudan URL'sine yönlendirir ve okuyucunuz blogunuzdan kopar.

İşte bugün, blogunuza Apple, Medium veya Substack gibi dev platformların kullandığı o şık, akıcı ve profesyonel görsel büyütme efektini (Lightbox) ekliyoruz.Sadece JavaScript ve CSS ile.

<script type='text/javascript'>
//<![CDATA[
(function() {
  // 1. Dinamik CSS Ekleme
  var style = document.createElement('style');
  style.innerHTML = `
    .zoom { cursor: zoom-in; display: inline-block; position: relative; }
    .zoom.s {
      position: fixed; top: 0; left: 0; bottom: 0; right: 0;
      width: 100%; height: 100%; margin: 0;
      background: rgba(0,0,0,.85);
      display: flex; align-items: center; justify-content: center;
      z-index: 99999;
      -webkit-backdrop-filter: saturate(180%) blur(15px);
      backdrop-filter: saturate(180%) blur(15px);
      cursor: zoom-out;
    }
    .zoom.s img {
      display: block; max-width: 95%; max-height: 95%;
      width: auto; height: auto; margin: auto;
      border-radius: 8px; box-shadow: 0 10px 50px rgba(0,0,0,0.5);
      transition: transform 0.3s ease;
    }
    .zoom::after {
      content: '\\2715'; position: fixed; bottom: -60px; right: 30px;
      width: 50px; height: 50px; background: #fff; color: #000;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; font-size: 20px; font-weight: bold;
      transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      opacity: 0; visibility: hidden; z-index: 100000;
    }
    .zoom.s::after { bottom: 30px; opacity: 1; visibility: visible; }
    body.zoom-active { overflow: hidden; }
  `;
  document.head.appendChild(style);

  // 2. Sarmalama Fonksiyonu (Wrap)
  function wrapElement(wrapper, el) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
  }

  // 3. Ana Fonksiyonun Çalıştırılması
  document.addEventListener("DOMContentLoaded", function() {
    // Blogger içerik alanındaki resimleri bul (post-body genel standarttır)
    var posts = document.querySelectorAll('.post-body img, img');
    
    posts.forEach(function(img) {
      // Mevcut tıklama olaylarını temizle (Linke gitmesini engelle)
      if (img.closest('a')) {
        img.closest('a').onclick = function(e) { e.preventDefault(); return false; };
      }
      
      // Div oluştur ve resmi içine al
      var container = document.createElement('div');
      container.className = 'zoom';
      wrapElement(container, img);

      // Tıklama Olayı
      container.onclick = function() {
        this.classList.toggle('s');
        document.body.classList.toggle('zoom-active');
      };
    });

    // Defer.js Uyumu
    if (typeof Defer !== 'undefined') {
      Defer.dom('.lazy', 100, 'loaded', null, {rootMargin:'1px'});
    }
  });
})();
//]]>
</script> 

Eğer Blogger'ın kendi varsayılan "Lightbox" özelliği (resme tıklayınca açılan eski siyah ekran) hala aktifse, bu kodla çakışabilir. Bunu kapatmak için Blogger panelinde Ayarlar > Kayıtlar > Resim Işık Kutusu seçeneğini kapatman iyi olur.

Kodu eklerken bir sorun yaşarsanız veya özelleştirmek isterseniz yorumlarda buluşalım!

Yorum yaz