https://www.24plovdiv.bg/js/theme.js?v=21

1// Navigation
2
3document.addEventListener('DOMContentLoaded', () => {
4  var burgerMenu = document.getElementById('burger-menu');
5  var burgerMenuX = document.getElementById('burger-menu-x');
6  var navigation = document.getElementById('menu');
7
8  burgerMenu.addEventListener('click', () => {
9    burgerMenuX.classList.toggle("expanded");
10    burgerMenu.classList.toggle("expanded");
11    navigation.classList.toggle("expanded");
12  });
13
14  burgerMenuX.addEventListener('click', () => {
15    burgerMenu.classList.toggle("expanded");
16    burgerMenuX.classList.toggle("expanded");
17    navigation.classList.toggle("expanded");
18  });
19});
20
21
22// ------------------------------------------------------------------------------------------- //
23
24
25// Articles Slider Two
26
27var articlesSliderTwo = new Swiper('.articles-slider-two', {
28  slidesPerView: 1,
29  spaceBetween: 32,
30  autoplay: false,
31  freeMode: false,
32  loop: false,
33  keyboard: {
34    enabled: true,
35  },
36  navigation: {
37    nextEl: ".swiper-button-next",
38    prevEl: ".swiper-button-prev",
39  },
40  pagination: {
41    el: ".swiper-pagination",
42    clickable: true,
43  },
44  breakpoints: {
45    600: {
46      slidesPerView: 2,
47    },
48    1000: {
49      slidesPerView: 3,
50    },
51  },
52});
53
54// Top Articles Slider
55
56var topArticlesSlider = new Swiper(".top-articles-slider", {
57  slidesPerView: 2,
58  slidesPerColumn: 2,
59  // slidesPerGroup: 2,
60  spaceBetween: 16,
61  grid: {
62    rows: 2,
63    fill: 'row'
64  },
65  loop: false,
66  autoplay: false,
67  keyboard: {
68    enabled: true,
69  },
70  navigation: {
71    nextEl: ".swiper-button-next",
72    prevEl: ".swiper-button-prev",
73  },
74  pagination: {
75    el: ".swiper-pagination",
76    // clickable: true,
77  },
78  breakpoints: {
79    600: {
80      slidesPerView: 3,
81      grid: {
82        rows: 4,
83      },
84      spaceBetween: 0,
85    },
86  },
87});
88
89// Articles Slider
90
91var articlesSlider = new Swiper(".articles-slider", {
92  slidesPerView: 2,
93  spaceBetween: 16,
94  loop: false,
95  autoplay: false,
96  keyboard: {
97    enabled: true,
98  },
99  navigation: {
100    nextEl: ".swiper-button-next",
101    prevEl: ".swiper-button-prev",
102  },
103  pagination: {
104    el: ".swiper-pagination",
105    clickable: true,
106  },
107  breakpoints: {
108    600: {
109      slidesPerView: 3,
110      grid: {
111        rows: 3,
112      },
113      spaceBetween: 0,
114    },
115  },
116});
117
118// Animation Slider
119
120var animationSlider = new Swiper('.animation-slider', {
121  slidesPerView: 1,
122  spaceBetween: 15,
123  loop: true,
124  speed: 500,
125  autoplay: false,
126  keyboard: {
127    enabled: true,
128  },
129  navigation: {
130    nextEl: ".swiper-button-next",
131    prevEl: ".swiper-button-prev",
132  },
133  pagination: {
134    el: ".swiper-pagination",
135    clickable: true,
136  },
137});
138
139
140// ------------------------------------------------------------------------------------------- //
141
142
143// Entry Content Slider
144
145var galleryThumbs = new Swiper('.entry-content-slider-thumbs', {
146  spaceBetween: 10,
147  slidesPerView: 1,
148  freeMode: true,
149  watchSlidesVisibility: true,
150  watchSlidesProgress: true,
151  loop: false,
152  keyboard: {
153    enabled: true,
154  },
155  breakpoints: {
156    320: {
157      slidesPerView: 2,
158    },
159    410: {
160      slidesPerView: 3,
161    },
162    500: {
163      slidesPerView: 4,
164    },
165    600: {
166      slidesPerView: 5,
167    },
168  },
169});
170if (document.getElementsByClassName('entry-content-slider-main')[0]) {
171  var swiper = new Swiper('.entry-content-slider-main', {
172    observer: true,
173    observeParents: true,
174    observeChildren: true,
175    spaceBetween: 10,
176    navigation: {
177      nextEl: '.swiper-button-next',
178      prevEl: '.swiper-button-prev',
179    },
180    loop: false,
181    keyboard: {
182      enabled: true,
183    },
184    thumbs: {
185      swiper: galleryThumbs
186    },
187  });
188}
189
190
191var swiperModal = new Swiper('.swiper-container-modal', {
192  observer: true,
193  observeParents: true,
194  observeChildren: true,
195  spaceBetween: 16,
196  navigation: {
197    nextEl: '.swiper-button-next',
198    prevEl: '.swiper-button-prev',
199  },
200  pagination: {
201    el: ".swiper-pagination-numbers",
202    type: "fraction",
203  },
204  on: {
205    slideChange: function () { $('#entry-content-slider-modal .title').text($('.swiper-container-modal .swiper-slide:nth-child(' + (swiperModal.activeIndex + 1) + ') img').data('title')); }
206  },
207  // zoom: {
208  //   maxRatio: 2,
209  //   toggle: true, // enable zoom-in by double tapping slide
210  // },
211  loop: false,
212});
213
214const nonModalGalleryImgContainer = document.querySelector(
215  '.entry-content-slider-main'
216);
217if (nonModalGalleryImgContainer) {
218  const nonModalGalleryImgWrapper = nonModalGalleryImgContainer.querySelector(
219    '.swiper-wrapper'
220  );
221}
222
223// Get modal element
224var modal = document.getElementById('entry-content-slider-modal');
225// Get open modal button
226var modalBtn = document.querySelectorAll('.swiper-slide-img'); // select all swiper-slides (outside modal)
227// close button
228var closeBtn = document.getElementsByClassName('closeBtn')[0]; // returns an array... just get first one (only one element with this class)
229
230
231// Get open modal button
232var formBtn = document.querySelector('.form-btn');
233
234var imagesCont = document.querySelectorAll('.open-image'); // select all images in content
235
236function imageOpenModal() {
237  let swiperIndexPos = $(this).data('order');
238  swiperModal.slideTo(swiperIndexPos);
239  swiperModal.lazy.load(); // need to initailize lazy load if modal opened
240  modal.style.display = 'block';
241  swiperModal.keyboard.enable();
242  document.addEventListener('keydown', closeModalWithKeyboard);
243}
244
245imagesCont.forEach(element => {
246  element.addEventListener('click', imageOpenModal); // add an click event listener for each swiper-slide (outside the modal)
247})
248
249if (formBtn) {
250  formBtn.addEventListener('click', function () {
251    modal.style.display = 'block';
252    document.addEventListener('keydown', closeModalWithKeyboard);
253  });
254}
255
256function openModal() {
257  let swiperIndexPos = swiper.activeIndex;
258  swiperModal.slideTo(swiperIndexPos);
259  swiperModal.lazy.load(); // need to initailize lazy load if modal opened
260  modal.style.display = 'block';
261  swiper.keyboard.disable();
262  swiperModal.keyboard.enable();
263  document.addEventListener('keydown', closeModalWithKeyboard);
264}
265

266modalBtn.forEach(element => {
267  element.addEventListener('click', openModal); // add an click event listener for each swiper-slide (outside the modal)
268})
269
270function openModalWithKeyboard(event) {
271  if (event.key === 'Enter') {
272    openModal();
273  }
274}
275
276if (nonModalGalleryImgContainer) {
277  // open modal if non-modal image wrapper is in focus and enter is hit
278  nonModalGalleryImgContainer.addEventListener('keydown', openModalWithKeyboard);
279}
280function closeModal() {
281  if (swiper){
282    let swiperModalIndexPos = swiperModal.activeIndex;
283    swiper.slideTo(swiperModalIndexPos);
284    swiper.keyboard.enable();
285  }
286  modal.style.display = 'none';
287  swiperModal.keyboard.disable();
288  document.removeEventListener('keydown', closeModalWithKeyboard);
289}
290
291if (closeBtn) {
292  // Listen for close click
293  closeBtn.addEventListener('click', closeModal);
294}
295
296// close modal using Escape key
297function closeModalWithKeyboard(event) {
298  if (event.key === 'Escape') {
299    closeModal();
300  }
301}
302
303
304// ------------------------------------------------------------------------------------------- //