website/gallery.js at fingercoder-v-3 · fingercoder01/website · 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
class Gallery {
  constructor() {
    this.el = document.getElementById('gallery');
    if (!this.el) return;
    this.el.innerHTML = this.render();
  }

  render = () => {
    var items = [1, 2, 3, 4, 5, 6]
      .map(function (i) {
        return `
          <div class="col-md-6 col-sm-6 col-lg-4">
            <div class="gallery-box">
              <div class="img-thumb">
                <img class="img-fluid" src="assets/img/gallery/img-${i}.jpeg" alt="تصویر ${i} از آرشیو نشست‌های فینگرکدر" loading="lazy" decoding="async" width="400" height="300">
              </div>
              <div class="overlay-box text-center">
                <a class="lightbox" href="assets/img/gallery/img-${i}.jpeg" aria-label="بزرگ‌نمایی تصویر ${i} گالری فینگرکدر">
                  <i class="lni-plus" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>`;
      })
      .join('');

    return `
      <div class="container home-gallery-preview">
        <div class="row">
          <div class="col-12">
            <div class="section-title-header text-center">
              <h1 class="section-title">نگاهی به گالری</h1>
              <p>چند قاب از دورهمی‌ها — گالری کامل را با فیلتر شهر و نشست ببینید</p>
            </div>
          </div>
        </div>
        <div class="row">${items}</div>
        <div class="row justify-content-center mt-3">
          <div class="col-xs-12">
            <a href="gallery.html" class="btn btn-common">مشاهده گالری کامل</a>
          </div>
        </div>
      </div>`;
  };
}

new Gallery();