Anasayfa
Forum
Hakkında
MyBB Hassas Görseller İçin Tıklayınca Açılan Bulanıklaştırma (Blur) Efekti
Forum sitemizde paylaşılan görsellerin hassas, şiddet içeren veya rahatsız edici olabileceği durumlar göz önünde bulundurularak kullanıcıların isteğe bağlı olarak görebileceği bir Buzlanmış (Blur) Resim sistemi hazırladık.
Bu özellik sayesinde belirlediğiniz görseller varsayılan olarak bulanık görünecek, kullanıcı resmin üzerine tıkladığında ise görsel netleşecektir.
Kurulum Adımları
1. Adım: MyCode Tanımlaması
Admin Kontrol Paneli (KP) 
Forum Ayarları MyCode sayfasına gidin ve Yeni MyCode Ekle butonuna tıklayın.
Aşağıdaki bilgileri ilgili alanlara girin ve kaydedin:
- MyCode Başlığı: Kod:
Buzlanmış [Blur] Resim - MyCode Açıklaması: Kod:
Sadece [blur] içine alınan resimleri tıklanabilir ve bulanık hale getirir. - Düzenli İfade: Kod:
\[blur\](https?://[^\s\[]+)\[/blur\] - Yerine Gösterilicek İfade: Kod:
<span class="gidenler-blur-image" tabindex="0"><img src="$1" alt="Buzlu resim" /><span class="gidenler-blur-overlay"><span class="gidenler-blur-icon">!</span><span>Görmek için tıkla</span></span></span> - Aktiflik: Evet
2. Adım: CSS Kodlarının Eklenmesi
- Admin KP Temalar ve Şablonlar Temalar [Kullandığınız Tema] global.css dosyasını düzenlemek üzere açın.
- Sayfanın en alt satırına aşağıdaki kodları yapıştırıp kaydedin:
Kod:
/* =========================================================
GİDENLER.ME - SEÇİLEBİLİR BUZLU RESİM
MyBB 1.8.37
========================================================= */
.gidenler-blur-image {
position: relative;
display: inline-block;
max-width: 100%;
overflow: hidden;
cursor: pointer;
border-radius: 8px;
vertical-align: middle;
line-height: 0;
}
.gidenler-blur-image > img {
display: block;
max-width: 100%;
height: auto;
filter: blur(18px);
transform: scale(1.04);
transition:
filter 0.45s ease,
transform 0.45s ease;
}
/* Üzerindeki katman */
.gidenler-blur-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.30);
color: #ffffff;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
text-align: center;
transition: opacity 0.35s ease;
}
/* Göz simgesi */
.gidenler-blur-icon {
display: block;
margin-bottom: 8px;
font-size: 30px;
line-height: 1;
}
/* Mouse üzerine gelince */
.gidenler-blur-image:hover .gidenler-blur-overlay {
background: rgba(0, 0, 0, 0.40);
}
/* Resim açıldığında */
.gidenler-blur-image.revealed > img {
filter: blur(0);
transform: scale(1);
}
/* Katmanı gizle */
.gidenler-blur-image.revealed .gidenler-blur-overlay {
opacity: 0;
pointer-events: none;
}
/* Klavye erişilebilirliği */
.gidenler-blur-image:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.35);
}
/* Mobil */
@media (max-width: 600px) {
.gidenler-blur-image {
max-width: 100%;
border-radius: 6px;
}
.gidenler-blur-overlay {
font-size: 13px;
}
.gidenler-blur-icon {
font-size: 26px;
}
}3. Adım: JavaScript Kodunun Eklenmesi
- Admin KP Temalar ve Şablonlar Şablonlar [Kullandığınız Tema Şablonları] Ungrouped Templates (Gruplanmamış Şablonlar) headerinclude şablonunu açın.
- Sayfanın en sonuna aşağıdaki betiği ekleyip kaydedin:
Kod:
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.gidenler-blur-image').forEach(function (image) {
image.addEventListener('click', function () {
image.classList.toggle('revealed');
});
image.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
image.classList.toggle('revealed');
}
});
});
});
</script>Kullanım Şekli
Konu veya yorum yazarken gizlemek istediğiniz görselin bağlantısını şu şekilde ekleyebilirsiniz:
Kod:
[blur]https://site-adresi.com/resim-linki.png[/blur]Önizleme:
|
Bu metnin taslağı yazar tarafından kaleme alınmış, dil bilgisi ve akıcılık düzenlemeleri Gemini iş birliğiyle tamamlanarak siz kıymetli okuyucularımızın beğenisine sunulmuştur. |
 DİKKAT |
