إنشاء معرض للصور الديناميكية مع الأفلام و التجسس باستخدام الجافوري

مقدمة

وسيؤدي بناء معرض دينامي للصور، مع القدرة على التصفيف والفرز، إلى تحويل مجموعة من الصور الثابتة إلى تجربة مؤثرة وسهلة الاستعمال، ويمكن للزائرين أن يجدوا بسرعة صوراً تضاهي مصالحهم، مثل التصفير بالطبيعة أو المدينة أو نتائج إعادة الترشيح بالاسم أو التاريخ أو التصنيف دون إعادة تحميل صفحة، وهذه المادة توفر نهجاً شاملاً ومناسباً للإنتاج لإيجاد مثل هذا المعرض المتسم بالكفاءة

إنشاء هيكل HTML

مؤسسة (HTML) ذات بنية جيدة تقوم بالتصفية والفرز بشكل مباشر كل عنصر من عناصر الصور يجب أن يحمل تقليداً [(FLT:0]] سمات تصف فئته أو إسمه أو تاريخه أو أي ممتلكات أخرى تنوين التصفية أو الفرز بها.

قاعدة قياس للملفات ومراقبات التسوق

إنشاء حاوية لزرارات الرش وجهاز آخر لضبط الفرز.

<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>

ويحسن و] إمكانية الوصول إلى مستخدمي الشاشة.() ويُرسم على زر [الصف ] لبيان الحالة الأولية؛ وستضع هذا على غرار نظام الخدمات العامة.

حاويات معرض الصور

Inside a , place each photo in its own wrapper element. Use , , ], and attributes for filtering and sorting. For example:

<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>

The attribute delays loading of offscreen images, improving initial page load performance. Each photo wrapper can also include a caption or overlay for additional information.

استخدام خصائص البيانات بفعالية

Data attributes] (مثلاً، ، ) لا تقتصر على الخيوط، بالنسبة للتصنيف الرقمي، أرقام المخزن كسلاسل؛ وسوف تُثبتها جافاسكريبت حسب الحاجة، وبالنسبة لفئات متعددة، يمكنك تخزين قائمة مفصَّلة عن الفضاء مثل [[[1]

صفع المسلسل مع CSS

وضع مخطط نظيف ومستجيب للملامح التفاعلية، استخدم (سي إس غريد) أو (فليكس بوكس) لشبكة الصور، وضبط الأزرار لبيان مرشحات نشطة وحالات فرز.

Photo Grid Layout

.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);
}

هذه الشبكة تضمن التكيّف مع حجم الشاشة، تأثير القفز يضيف تفاعلاً بسيطاً مع الزوم، مما يجعل المعرض يشعر أكثر مهذبة.

الدولة النشطة لبوتون

#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;
}

وتطبيق صف ] على المقياس الحالي/الزر المركب يقدم تعليقات بصرية.

الاعتبارات المستجيبة

ضمان عمل المعرض على أجهزة الاتصال، وزيادة حجم الهدف المحدد لمس الزر إلى 44 × على الأقل بحلول 44 × (توصية من الفريق العامل المعني بالوسم العالمي المعني بالبحوث الزراعية العالمية 2-1) واستخدام الاستفسارات الإعلامية عند الضرورة للتحول من شبكة متعددة الكواكب إلى عمود واحد على شاشات صغيرة جدا.

تنفيذ عملية تصوير خافاسكيبت

الآن نجلب المعرض إلى الحياة الفكرة الأساسية: الاستماع للنقرات على أزرار الرشاقة، ثم عرض أو إخفاء عناصر الصورة على أساس عزوها.

اختيار عناصر إدارة الشؤون الإدارية والبدء في

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

كما أن تخزين صفيفة يعطينا إمكانية الوصول بسهولة إلى أساليب صفيفة مثل و .

ملء اللغم

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);
}

وتدعم هذه الوظيفة فئات متعددة: إذا كان ]، تختار إما " مكانة " أو " غطاء الأرض " سيظهر الصورة. Note: ]] [يعيد قيمة (كسلسلة).

مستمعون إلى فيلم "بوتونز"

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);
 });
});

(د) إن إزالة طبقة ] من جميع الأزرار وإضافةها إلى النقرة، تضمن الاتساق البصري.

تنفيذ برنامج جافاسكريبت سورتنغ

ويعيد تنظيم الصور المرئية في إدارة الشؤون الإدارية على أساس سمة مختارة (مثل الاسم والتاريخ والتقدير).

أداء الشائعات

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));
}

(ب) العمل على الصور المرئية فقط، مما يعني بعد تغيير التصفية، أن تعيد الطلب وفقاً للنوع النشط، وبالنسبة للسلاسل، نستخدم [(FLT:36]) للأمر الأبجدي المناسب، وتقارن التواريخ بأرقام التاريخ، وتصنف التقديرات حسب ترتيب الانحراف (أكثر شعبية أولاً).

مستمعون للحدث لبوتون

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

وعندما يُقر زر من نوع ما، نُحدّث الصف النشط ونتصل بالمفتاح النوعي المرغوب، لأن ] قد اتصل بالفعل بعد التصفية، يظل المعرض متسقا.

المجموعة الأولية

// 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');

(د) الاتصال [(FLT:42]] في البداية يضمن أن يكون المعرض مأهولة بجميع الصور ويفرزها النوع الافتراضي (الاسم).

إعداد الملفات والبحث المتقدمين

تصفية بسيطة مفيدة لكن ربما تريد أن تجمع بين عدة مرشحات أو إضافة مدخل للبحث عن النص

ملفات متعددة الفئات (الصناديق)

بدلا من الأزرار الحصرية، استخدموا صناديق التفتيش لكي يتمكن المستخدمون من اختيار فئات متعددة:

<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>

ثم تعديل منطق التصفير لبناء مجموعة من الفئات النشطة:

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);
}

وإذا لم يتم فحص أي صناديق تفتيش، قد تختار أن تظهر جميع الصور (كما هو الحال في الرمز أعلاه) أو أن تبين لا أحد يحدد الأشعة فوق البنفسجية المطلوبة.

نص البحث

يضاف حقل مدخلات يبحث عن الأساطيل أو سمات:

<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);
});

البحث عن المركب مع أزرار التصفية لإتاحة المزيد من النتائج الضيقة

الأداء وإمكانية الوصول

وينبغي أن يكون المعرض الدينامي سريعاً ومفيداً من قبل الجميع، بمن فيهم الأشخاص الذين يستخدمون تكنولوجيات المساعدة.

صور كسولة للهب

وقد استخدمنا بالفعل [(FLT:48]) الذي يرجئ التحميل إلى أن تكون الصورة قريبة من الصورة، وبالنسبة للمنصبين المسنين، يمكنك تنفيذ عملية تفكك كسولة في حمولة الجافاسكريت باستخدام ] [المراقبين المتفرعين] ، وهذا يضمن أنه حتى لو لم يتم دعم التحميل المحلي، فإن الصور غير المصورة.

Debouncing search Input

إذا أرفقت مستمع البحث بـ ، تشعل النار في كل مفترق مفاتيح، وبالنسبة للمجالات الكبيرة، تنظر في نزع فتيل المعالج (مثلاً، التأخير 200 متر) لتجنب التلاعب المفرط في إدارة الشؤون الإدارية.

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>
وبعد كل عملية تصفية/عملية، استكمال نص هذا العنصر، مثل " عرض 8 صور للطبيعة مصنفة بالاسم " ، وهذا يساعد المستعملين الذين يعتمدون على قارئي الشاشات على فهم ما تغير.
CSS for Hidden Content
وبدلاً من استخدام ] وحده، النظر في استخدام فئة خدمات الدعم المركزية مثل التي تخفي العنصر وتزيله من شجرة الوصول:
.hidden {
 display: none !important;
 visibility: hidden;
}
وباستخدام يزيل العناصر من شجرة الوصول، وهو أمر مناسب، فقط تأكدي من عدم اعتمادك فقط على دون لأن ذلك يترك العنصر الذي يحتل حيزا.
خاتمة
وبجمعها بين نظام HTML النظيف، ونظام المراقبة المستجيب للسلسلة، ونظام جافاسكريبت المهيكل جيدا، يمكن أن تبني معرضا ديناميا للصور سريع المنال وميسرا وممتعا بالاستخدام، كما أن التقنيات التي تغطي التصفية حسب الفئة )بما في ذلك الفئات المتعددة(، وتفرزها مختلف الخصائص، وتضيف البحث عن النصوص، وتضع الأساس المتين للأداء على النحو الأمثل، ويمكن توسيع نطاقه بملامح، مثل الرواسب،
وللمزيد من القراءة، فإن وثائق MDN بشأن الأري.prototype.sort لوضـع ] توضح خوارزمية الفرز، و دليل التصميم المستجيب ] يقدم معلومات إضافية عن التصميم.