@if (Model.Gallery.Any())
{
@foreach (var item in Model.Gallery)
{
-
- @if (!string.IsNullOrEmpty(item.ImageUrl))
- {
- 
- }
- else
- {
-
-
-
-
+ }
+ else if (hasImg)
+ {
+ تصویر قبل و بعد
+ var hasBoth = !string.IsNullOrEmpty(item.BeforeImageUrl) && !string.IsNullOrEmpty(item.AfterImageUrl); + var hasImg = !string.IsNullOrEmpty(item.ImageUrl); + if (hasBoth) + { +
+
+
+
+ 
+ قبل
- }
-
-
+ 
+ بعد
+
+ @if (!string.IsNullOrEmpty(item.Caption)) { @item.Caption
}
+
+
+
+ @if (!string.IsNullOrEmpty(item.Caption)) {
+ }
}
}
else
@@ -703,11 +720,16 @@
btns[1].classList.toggle('active');
}
- // Tab buttons
+ // Tab buttons — filter gallery by category
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
+ const cat = btn.textContent.trim();
+ document.querySelectorAll('#galleryGrid .gallery-item').forEach(item => {
+ const match = cat === 'همه' || (item.dataset.cat || '') === cat;
+ item.style.display = match ? '' : 'none';
+ });
});
});
diff --git a/index.html b/index.html
index efc6d74..9bbc530 100644
--- a/index.html
+++ b/index.html
@@ -609,6 +609,56 @@
.gallery-item:hover .gallery-item-overlay { background: rgba(184,149,90,0.15); }
+ /* Before/After split layout */
+ .gallery-item.before-after {
+ display: flex;
+ flex-direction: row;
+ }
+ .gallery-item.before-after .ba-half {
+ flex: 1;
+ position: relative;
+ overflow: hidden;
+ }
+ .gallery-item.before-after .ba-half img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ transition: transform 0.4s;
+ }
+ .gallery-item.before-after:hover .ba-half img { transform: scale(1.05); }
+ .gallery-item.before-after .ba-label {
+ position: absolute;
+ bottom: 6px;
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(0,0,0,0.55);
+ color: #fff;
+ font-size: 0.65rem;
+ padding: 2px 8px;
+ border-radius: 20px;
+ white-space: nowrap;
+ pointer-events: none;
+ }
+ .gallery-item.before-after .ba-divider {
+ width: 2px;
+ background: rgba(255,255,255,0.7);
+ position: relative;
+ z-index: 2;
+ flex-shrink: 0;
+ }
+ .gallery-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: linear-gradient(transparent, rgba(0,0,0,0.5));
+ color: #fff;
+ font-size: 0.75rem;
+ padding: 1.2rem 0.8rem 0.5rem;
+ text-align: center;
+ }
+
/* ─── Testimonials ──────────────────────────────────────────── */
#testimonials { background: var(--section-bg); }
@@ -1145,68 +1195,8 @@
@item.Caption
}
+
+
-
-
@@ -1426,11 +1416,64 @@
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
+ // Gallery — load from API
+ let allGalleryItems = [];
+
+ function renderGallery(items) {
+ const grid = document.getElementById('galleryGrid');
+ if (!items.length) {
+ grid.innerHTML = '
-
-
-
-
-
- تصویر قبل و بعد
-
-
-
-
-
-
- تصویر قبل و بعد
-
-
-
-
-
-
- تصویر قبل و بعد
-
-
-
-
-
-
- تصویر قبل و بعد
-
-
-
-
-
-
- تصویر قبل و بعد
-
-
+
-
-
-
- تصویر قبل و بعد
-
+
تصویری یافت نشد.
'; + return; + } + grid.innerHTML = items.map(g => { + const hasBoth = g.beforeImageUrl && g.afterImageUrl; + const hasImg = g.imageUrl; + if (hasBoth) { + return `
+
`;
+ }
+ if (hasImg) {
+ return `
+ 
+ قبل
+
+
+
+ 
+ بعد
+
+ ${g.caption ? `${g.caption}
` : ''}
+
+
+ 
+ ${g.caption ? `
`;
+ }
+ return '';
+ }).join('');
+ grid.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
+ }
+
+ async function loadGallery(category) {
+ try {
+ const url = category && category !== 'همه' ? `/api/gallery?category=${encodeURIComponent(category)}` : '/api/gallery';
+ const res = await fetch(url);
+ if (!res.ok) return;
+ const data = await res.json();
+ allGalleryItems = data;
+ renderGallery(data);
+ } catch(e) { /* silent — placeholders stay hidden */ }
+ }
+
+ loadGallery();
+
// Tab buttons
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
+ loadGallery(btn.textContent.trim());
});
});
${g.caption}
` : ''}
+
+