Filtrelerle Dinamik bir Fotoğraf Galerisi oluşturmak ve Javascript'i kullanarak sıralayın

Giriş Giriş Giriş

Filtreleme ve sıralama yetenekleri ile dinamik bir fotoğraf galerisi inşa etmek, statik bir görüntü koleksiyonu ilgi çekici, kullanıcı dostu bir deneyim haline getirir. Ziyaretçiler ilgilerini hızla bulabilir - örneğin, doğa, şehir veya insanlar tarafından filtrelemek - ve yeniden sipariş etmek, tarih, veya bir sayfa geri yükleme olmadan puan. Bu makale, düz JavaScript kullanarak bu tür bir galeri oluşturmaya yönelik kapsamlı bir yaklaşım sunar ve kolayca erişilebilir.

HTML Structure Up the HTML Structure

İyi bir yapılandırılmış HTML temeli filtreleme ve basit bir şekilde şekillendirir. Her görüntü elemanı, kategorisini, adını, tarihini veya başka herhangi bir mülkünü tarif eden özel bir şekilde olmalıdır.

Filtreler için Base Markup ve Sorting Controls

Filtre düğmeleri ve bir başka for sorting kontrolleri için bir konteyner oluşturun. UseETHFLT:1), [[Üye ait elementler ve [[DÜye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/Üye/

<div id="controls">
 <div id="filter-buttons" role="group" aria-label="Filter photos by category">
 <button data-filter="all" class="active">Show All</button>
 <button data-filter="nature">Nature</button>
 <button data-filter="city">City</button>
 <button data-filter="people">People</button>
 </div>
 <div id="sort-options" role="group" aria-label="Sort photos">
 <button data-sort="name">Sort by Name</button>
 <button data-sort="date">Sort by Date</button>
 <button data-sort="rating">Sort by Rating</button>
 </div>
</div>

Ekran okuyucu kullanıcıları için erişilebilirlik geliştirir.TheurFLT:8, ilk durumu belirtmek için bir sınıf olarak işaretlenir; bunu CSS ile stilize edersiniz.

Image Gallery Konteyner

Bir de kendi sarmalayıcı elementinde her fotoğrafın yerini alır.()), [[DÜŞÜNÜŞÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜ, LÜ, BÜTÜŞÜŞÜNÜŞÜŞÜNÜŞÜŞÜŞÜNÜŞÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜŞÜŞÜNÜŞÜNÜŞÜŞÜŞÜŞÜŞÜŞÜNÜŞÜŞÜŞÜŞÜŞÜŞÜN

<div id="gallery" class="photo-grid">
 <div class="photo" data-category="nature" data-name="Sunset Over the Hills" data-date="2023-06-15" data-rating="4.5">
 <img src="images/sunset.jpg" alt="Sunset over rolling hills" loading="lazy">
 <div class="photo-caption">Sunset Over the Hills</div>
 </div>
 <div class="photo" data-category="city" data-name="Downtown Skyline" data-date="2023-07-01" data-rating="4.2">
 <img src="images/skyline.jpg" alt="Downtown skyline at dusk" loading="lazy">
 <div class="photo-caption">Downtown Skyline</div>
 </div>
 <!-- more photos -->
</div>

[FONT: 15) Özellikler, ekran dışı görüntülerden yük çıkarır, ilk sayfa yükleme performansını geliştirir.Her fotoğraf da ek bilgi için bir komut veya overlay içerebilir.

Data Attributes Etkili Bir Şekilde

[FONT:0)Data attributes[Döneticileri (e.g., 03.03.2010)) Bu teknik, görüntülerin birden fazla filtre altında görünmesine izin verir. Sayılar üzerinde kapsamlı bir referans için, JavaScript'in onlara ihtiyaç duyduğu gibi parladığı gibi.For multiple categories, you can store a space-separated list ).

Galeri'yi CSS ile Styling

Temiz, duyarlı bir düzen, interaktif özellikler için sahneyi ayarlar. CSS Grid veya Flexbox'ı fotoğraf ızgarası için kullanın ve aktif filtreler ve devlet sıralamasını gösteren düğmeleri yazın.

Photo Grid Layoutout

.photo-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 1rem;
 padding: 1rem 0;
}

.photo {
 position: relative;
 overflow: hidden;
 border-radius: 8px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.photo img {
 width: 100%;
 height: auto;
 display: block;
 transition: transform 0.3s ease;
}

.photo:hover img {
 transform: scale(1.05);
}

Bu ızgara görüntüleri ekran boyutuna adapte sağlar.Bodrum etkisi ince bir zoom etkileşimi ekliyor, galeri daha parlatılmış hissediyor.

Düğmeler için Aktif Devlet

#filter-buttons button.active,
#sort-options button.active {
 background-color: #007acc;
 color: #fff;
 border-color: #007acc;
}

button {
 padding: 0.5rem 1rem;
 border: 1px solid #ccc;
 background: #fff;
 cursor: pointer;
 margin: 0.25rem;
 border-radius: 4px;
 transition: background 0.2s, color 0.2s;
}

button:hover {
 background: #e6e6e6;
}

Mevcut filtre /sort düğmesine sınıf uygulamak görsel geri bildirim sağlar. JavaScript bu dersi ekleme ve kaldırmayı başaracaktır.

Sorumluluk

Galerinin dokunmatik cihazlarda çalıştığını sağlayın. Düğme dokunuş hedef boyutları en az 44px 44px (WCAG 2.1 öneri) Çok küçük ekranlarda tek bir sütuna geçmek için gerekli olan medya sorgularını kullanın.

JavaScript Filtreleme

Şimdi galeriyi hayata getiriyoruz. Temel fikir: filtre düğmeleri üzerine tıklamaları dinleyin, sonra onlarınİLFLT:22’lerine dayanan foto elementleri göster veya gizler.

DOM Elements'i seçin ve ilk olarak

const filterButtons = document.querySelectorAll('#filter-buttons button');
const sortButtons = document.querySelectorAll('#sort-options button');
const gallery = document.getElementById('gallery');
let photos = Array.from(gallery.children);
let activeFilter = 'all';
let activeSort = 'name'; // default sort

Bir dizi olarak StoringFLT:24, bize filtre değişikliğinden sonra yeniden uygulamamızı sağlar.

Mantıklı Mantık

function filterPhotos(filter) {
 activeFilter = filter;
 photos.forEach(photo => {
 const categories = photo.dataset.category; // may be a space-separated string
 const shouldShow = filter === 'all' || categories.split(' ').includes(filter);
 photo.style.display = shouldShow ? '' : 'none';
 });
 // After filtering, re-sort the visible photos
 sortPhotos(activeSort);
}

Bu işlev birden çok kategoriyi destekler: eğerÖRÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜN

Event dinleyicileri Filtre Düğmelerini Filtrelemek

filterButtons.forEach(button => {
 button.addEventListener('click', () => {
 const filter = button.dataset.filter;
 // Update active class on filter buttons
 filterButtons.forEach(btn => btn.classList.remove('active'));
 button.classList.add('active');
 // Apply filter
 filterPhotos(filter);
 });
});

Tüm düğmelerden sınıf geri yüklemek ve onu tıklamak için eklemek görsel tutarlılığı sağlar.TheurFLT:34) işlevi seçilmiş filtre değeri ile adlandırılır.

JavaScript Sorting

Seçilen bir özellike dayanan DOM'daki görünür fotoğrafları tekrar düzenlemektedir (örneğin, tarih, derecelendirme).

Sorting Function

function sortPhotos(sortBy) {
 activeSort = sortBy;
 // Get currently visible photos (display not 'none')
 const visiblePhotos = photos.filter(photo => photo.style.display !== 'none');

 visiblePhotos.sort((a, b) => {
 let valA, valB;
 switch (sortBy) {
 case 'name':
 valA = a.dataset.name.toLowerCase();
 valB = b.dataset.name.toLowerCase();
 return valA.localeCompare(valB);
 case 'date':
 valA = new Date(a.dataset.date);
 valB = new Date(b.dataset.date);
 return valA - valB;
 case 'rating':
 valA = parseFloat(a.dataset.rating);
 valB = parseFloat(b.dataset.rating);
 return valB - valA; // descending: highest first
 default:
 return 0;
 }
 });

 // Re‑append sorted photos back to the gallery container
 visiblePhotos.forEach(photo => gallery.appendChild(photo));
}

Sadece görünür fotoğraflar üzerinde çalışır, bu, siparişi aktif bir şekilde geri yüklemeniz anlamına gelir.Seks, doğru alfabetik sipariş için [[gündüzel sipariş için [[gündüzel sipariş için kullanılabilir. Tarihler tarihler tarihler en sık sıralanır.

Event dinleyicileri Sorting

sortButtons.forEach(button => {
 button.addEventListener('click', () => {
 const sortBy = button.dataset.sort;
 sortButtons.forEach(btn => btn.classList.remove('active'));
 button.classList.add('active');
 sortPhotos(sortBy);
 });
});

Bir tür düğme tıkladığında, istenen tür anahtarla ilgili olarak aktif sınıfı ve çağrıyı güncellemek. Çünkü [[DÜSTÜSÜSÜSTÜSÜSÜSTÜSÜSÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞ

İlk Kurulum İlk Kurulum

// Set default active buttons
document.querySelector('#filter-buttons [data-filter="all"]').classList.add('active');
document.querySelector('#sort-options [data-sort="name"]').classList.add('active');

// Load and initially sort by name
filterPhotos('all');

CallFLT:42 başlangıçta galerinin tüm görüntülerle dolu olmasını ve varsayılan tür (isim) tarafından sıralamasını sağlar.

Gelişmiş Filtreleme ve Arama

Basit bir kategori filtre faydalıdır, ancak birden çok filtreyi birleştirmek veya bir metin arama girişi eklemek isteyebilirsiniz. Aşağıdaki geliştirmeler temel mantık üzerinde inşa edilir.

Birden çok Kategori Filtreler (Checkboxes)

Özel düğmeler yerine, çek kutuları kullanın, böylece kullanıcılar birden fazla kategori seçebilir:

<div id="filter-checkboxes">
 <label><input type="checkbox" value="nature" checked> Nature</label>
 <label><input type="checkbox" value="city" checked> City</label>
 <label><input type="checkbox" value="people" checked> People</label>
</div>

Ardından filtreleme mantığını aktif kategoriler kümesi oluşturmak için değiştirin:

function filterPhotosByCheckboxes() {
 const checked = document.querySelectorAll('#filter-checkboxes input:checked');
 const activeCategories = Array.from(checked).map(cb => cb.value);

 photos.forEach(photo => {
 const photoCategories = photo.dataset.category.split(' ');
 const shouldShow = activeCategories.length === 0 ||
 photoCategories.some(cat => activeCategories.includes(cat));
 photo.style.display = shouldShow ? '' : 'none';
 });
 sortPhotos(activeSort);
}

Hiçbir çek kutusu kontrol edilirse, tüm görüntüleri (yukarıdaki kodda olduğu gibi) göstermeyi veya istenen UX'i göstermeyi seçebilirsiniz.

Text Search Giriş

Aramalar veya [[DÜŞÜNÜŞÜNÜŞÜŞÜŞÜŞÜŞÜŞÜŞÜNÜŞÜŞÜŞÜNÜŞÜNÜŞÜŞÜŞÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜŞÜŞÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜŞÜŞÜŞÜŞÜNÜŞÜŞÜŞÜŞÜŞÜŞÜNÜ

<input type="text" id="search" placeholder="Search photos...">

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', () => {
 const query = searchInput.value.toLowerCase();
 photos.forEach(photo => {
 const name = photo.dataset.name.toLowerCase();
 // Also search in caption if present
 const caption = photo.querySelector('.photo-caption')?.innerText.toLowerCase() || '';
 const matches = name.includes(query) || caption.includes(query);
 // If a filter is active, also check category
 const filter = activeFilter;
 const catMatch = filter === 'all' || photo.dataset.category.split(' ').includes(filter);
 photo.style.display = (matches && catMatch) ? '' : 'none';
 });
 sortPhotos(activeSort);
});

Daha dar sonuçlar daha fazla olmasına izin vermek için filtre düğmeleriyle birlikte arama yapın. Arama sırasında mevcut filtre durumunu saklamanız gerektiğini unutmayın.

Performans ve Accessability

Dinamik bir galeri hızlı olmalı ve yardımcı teknolojiler kullanan insanlar da dahil olmak üzere herkes tarafından kullanılabilir.

Lazy Yükleme Görüntüleri

Daha önce görüntünün desteklenmediğine kadar yüklediğine dair bir JavaScript tembel yükleme geri yüklemesini kullandık.(0)Stooke Gözlemleyici API) Bu, yerel tembel yüklemenin desteklenmediğini, ekran görüntülerin yüklenmediğini ve algılandığınız performansın azaltılmasını sağlar.

Debouncing Search Giriş

Arama dinleyicisini KAYNAK'ya koyarsanız, her anahtar astroke üzerinde yangınlar. büyük galeriler için eller (örneğin 200m gecikme) aşırı DOM manipülasyonlarından kaçınmak için eller (örneğin, 200ms gecikme) düşünün.

function debounce(func, delay) {
 let timeoutId;
 return function (...args) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() => func.apply(this, args), delay);
 };
}
searchInput.addEventListener('input', debounce(handleSearch, 200));

Keyboard Navigation
Filter and sort buttons should be focusable and operable via keyboard. Using native <button> elements already provides keyboard interaction (Enter/Space). Ensure that after filtering or sorting, focus is managed logically; for example, you could move focus to the first photo after a filter change via a focusable element. Also, consider adding aria-pressed attributes to filter buttons to indicate toggle state.
Announcing Changes to Screen Readers
Use an ARIA live region to announce filter and sort results:
<div id="gallery-announce" aria-live="polite" class="sr-only"></div>
Her filtre /sort eyleminden sonra, bu elementin metnini güncellemek, e.g., “Bir isim tarafından 8 doğa fotoğraf çekmek” Bu, ekran okuyucularına güvenen kullanıcıların ne değiştiğini anlamalarına yardımcı olur.
Gizli İçerik için CSS
Sadece CSST:51 kullanmak yerine, elementi gizleyen ve erişilebilir ağaçtan kaldıran bir CSS sınıfı kullanmayı düşünün:
.hidden {
 display: none !important;
 visibility: hidden;
}
[[Dint|4|D|Dint|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|D|S D|S D|S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S.S
Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç
Temiz semantik HTML'yi birleştirerek, doğru, erişilebilir ve kullanımı hoş olan dinamik bir fotoğraf galerisi oluşturabilirsiniz. kategoriye (çok kategoriler dahil), çeşitli özelliklerle sıralamak, metin aramayı ve optimize etmeyi sağlamak için - tekrarlanan API ile birlikte genişletebileceğiniz bir temel oluşturabilirsiniz.
Daha fazla okuma için, [[0) Dizide İDN dokümantasyonları [Dönderlik|Sort()) ve kullanıcıların tarama deneyimini kontrol altına alan güçlü, interaktif bir bileşendir.[Df3|Döneticileri, animasyonlar ve galerinizin ihtiyaçlarına özel olarak tasarlayın.