Certary/script.js at main · AminDenizer/Certary · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
const images = [
    'certificate1.png',
    'certificate2.png',
    'certificate3.png',
    'certificate4.png',
    'certificate5.png',
    'certificate6.png'
];

let isSingleView = false;

function displayImages() {
    const gallery = document.getElementById('gallery');
    gallery.innerHTML = '';

    if (isSingleView) {
        // نمایش تمام تصاویر در حالت تکی
        images.forEach(image => {
            const imgElement = document.createElement('a');
            imgElement.href = image;  // برای فعال شدن Fancybox
            imgElement.setAttribute('data-fancybox', 'gallery'); // برای گروه‌بندی تصاویر
            imgElement.setAttribute('data-caption', 'Certificate'); // توضیح تصویر

            const img = document.createElement('img');
            img.src = image;
            img.alt = 'Certificate';
            imgElement.appendChild(img);
            gallery.appendChild(imgElement);
        });

        gallery.className = 'single-view';
    } else {
        // نمایش تصاویر به صورت گرید
        images.forEach(image => {
            const imgElement = document.createElement('a');
            imgElement.href = image;  // برای فعال شدن Fancybox
            imgElement.setAttribute('data-fancybox', 'gallery');
            imgElement.setAttribute('data-caption', '');

            const img = document.createElement('img');
            img.src = image;
            img.alt = 'Certificate';
            imgElement.appendChild(img);
            gallery.appendChild(imgElement);
        });

        gallery.className = 'grid-view';
    }
}

document.getElementById('gridViewIcon').addEventListener('click', () => {
    isSingleView = false;
    toggleActiveView();
    displayImages();
});

document.getElementById('singleViewIcon').addEventListener('click', () => {
    isSingleView = true;
    toggleActiveView();
    displayImages();
});

function toggleActiveView() {
    document.getElementById('gridViewIcon').classList.toggle('active', !isSingleView);
    document.getElementById('singleViewIcon').classList.toggle('active', isSingleView);
}

displayImages();