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