Büyük görsel görünümü

Click olayı ve event delegation ile bir karta tıklanınca büyük görseli gösterirsin.

Olay yetkilendirmesi ile tıklama

Her görsel için ayrı dinleyici eklemek yerine, gallery kapsayıcısına tek bir click dinleyicisi ekleriz. Bu desenin adı olay yetkilendirmesi (event delegation).

Tıklanan öğeyi event.target verir. Eğer event.target.tagName === 'IMG' ise, bir görsel tıklanmış demektir; büyük görünümü o görselin kaynağıyla açarız.

Böylece ızgaraya sonradan görsel eklense bile dinleyici yeniden kurulmaz.

classList ile büyük görünüm

Büyük görünüm için bir modal div'i kullanacağız. Başlangıçta hidden sınıfı ile gizlidir; böylece ekranda görünmez. Bir karta tıklanınca iki şey yaparız:

modalImg.src = event.target.src ile büyük görselin kaynağını ayarlarız
modal.classList.remove('hidden') ile görünümü açarız

Kapatma için modal'ın kendisine bir tıklama dinleyicisi ekleriz; tıklanınca modal.classList.add('hidden') ile tekrar gizlenir.

Uygulama Büyük görünüm dinleyicilerini ekle

Önceki dersin çözümünün üzerine devam et. İskelete bir modal div'i ve modalImg eklenmiş; sen tıklama dinleyicilerini yazacaksın. gallery.addEventListener('click', function(event) {...}) ekle; içinde if (event.target.tagName === 'IMG') ise modalImg.src = event.target.src yap ve modal.classList.remove('hidden') çağır. Kapatma için modal.addEventListener('click', function() {...}) ekle ve içinde modal.classList.add('hidden') çağır.

Örnek çözümü göster

gallery.addEventListener('click', function(event) {...}) ile başla; içinde if (event.target.tagName === 'IMG') ise modalImg.src = event.target.src ve modal.classList.remove('hidden') çağır. modal.addEventListener('click', function() { modal.classList.add('hidden'); }) ile kapat.

Örnek çözüm:
// Galeri uygulaması
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Galeri";
app.appendChild(title);

const gallery = document.createElement("div");
gallery.className = "gallery";
app.appendChild(gallery);

const images = [
  { url: "https://picsum.photos/id/1/200/200", title: "Dağ manzarası", author: "Ayşe" },
  { url: "https://picsum.photos/id/2/200/200", title: "Şehir sokakları", author: "Mehmet" },
  { url: "https://picsum.photos/id/3/200/200", title: "Göl kıyısı", author: "Zeynep" }
];

async function fetchImages(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("HTTP " + response.status);
    }
    return await response.text();
  } catch (error) {
    console.log(error.message);
  }
}

function renderGrid(images) {
  images.forEach(function(image) {
    const card = document.createElement("figure");
    const img = document.createElement("img");
    const caption = document.createElement("figcaption");
    img.src = image.url;
    img.alt = image.title;
    caption.textContent = image.author;
    card.appendChild(img);
    card.appendChild(caption);
    gallery.appendChild(card);
  });
}

// Büyük görünüm modalı
const modal = document.createElement("div");
modal.classList.add("hidden");
const modalImg = document.createElement("img");
app.appendChild(modal);
modal.appendChild(modalImg);

gallery.addEventListener("click", function(event) {
  if (event.target.tagName === "IMG") {
    modalImg.src = event.target.src;
    modal.classList.remove("hidden");
  }
});

modal.addEventListener("click", function() {
  modal.classList.add("hidden");
});

Kendini test et

Olay yetkilendirmesi neden kullanışlı?
```
gallery.addEventListener('click', function(event) {
  // ...
});
```
- Daha yavaş çalışır
- Sadece form öğelerinde çalışır
- Her öğeye ayrı dinleyici gerektirir
- Tek dinleyici ile tüm çocukları izler
Cevabı göster

Tek dinleyici ile tüm çocukları izler — Doğru! Üst öğedeki tek dinleyici tüm çocukları izler.

Tıklanan öğeyi al

const target = ____;

Cevabı göster

const target = event.target;

Olay kavramlarını eşleştir

event.target

Tıklanan öğe
tagName

Öğe türü
classList.remove

Sınıfı kaldırma
classList.add

Sınıfı ekleme
addEventListener

Olay dinleme

Sıradaki ders: Proje sonu - Galeri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler