https://www.circustreurdier.nl/wp-content/themes/circus-treurdier/js/script.js?ver=1.0.0

1//polyfill
2jQuery(document).ready(function () {
3  seamless.polyfill();
4});
5
6jQuery(document).ready(function () {
7
8  calculateProjectcardHeight();
9
10  jQuery('.grid').isotope({
11    itemSelector: '.grid-item',
12    percentPosition: true,
13    masonry: {
14      gutter: '.gutter-sizer',
15      columnWidth: '.grid-sizer'
16    },
17  });
18
19  // filter items on button click
20  jQuery('.filter-projects').on('click', 'li', function () {
21    var filterValue = jQuery(this).attr('data-filter');
22    jQuery('.grid').isotope({
23      filter: filterValue
24    });
25    jQuery('.filter-projects li').removeClass('active');
26    jQuery(this).addClass('active');
27  });
28
29  jQuery('#show-all').click(function (e) {
30    loadMore();
31  })
32
33  jQuery('#show-all-agenda-page').click(function (e) {
34    loadMoreAgendaPage();
35  })
36
37  jQuery('#show-all-old').click(function (e) {
38    loadMoreOld();
39  })
40
41  jQuery('#load-more-pers').click(function (e) {
42    loadMorePress();
43  })
44
45  jQuery('#load-more-gallery').click(function (e) {
46    loadMoreGallery();
47  })
48
49  // scroll to target
50  document.querySelectorAll('a[data-scrollto]').forEach(anchor => {
51    anchor.addEventListener('click', function (e) {
52      e.preventDefault();
53      document.querySelector(this.getAttribute('href')).scrollIntoView({
54        behavior: 'smooth'
55      });
56    });
57  });
58
59})
60
61
62
63window.addEventListener('resize', calculateProjectcardHeight);
64
65// Hamburgermenu
66function hamburgerMenu() {
67  var x = document.getElementById("site-navigation");
68  if (x.style.display === "block") {
69    x.style.display = "none";
70    document.querySelector('body').classList.remove('navigation-open');
71  } else {
72    x.style.display = "block";
73    document.querySelector('body').classList.add('navigation-open');
74    window.scrollTo(0, 0);
75  }
76}
77
78jQuery(document).ready(function () {
79  jQuery('.menu-icon').click(function () {
80    jQuery(this).toggleClass('open');
81  });
82});
83
84jQuery(document).ready(function () {
85  // jQuery(".extended").hide();
86  jQuery(".show-more").click(function () {
87
88    jQuery(this).prev(".extended").toggleClass('open');
89    // jQuery(this).prev(".extended").slideToggle(500);
90    jQuery('html,body').animate({
91      scrollTop: jQuery(this).prev(".extended").offset().top - 200
92    }, 500);
93
94    jQuery(this).text(jQuery(this).text() == 'Lees meer +' ? 'Lees minder -' : 'Lees meer +');
95  });
96});
97
98// Calculate project card height
99function calculateProjectcardHeight() {
100  var projectcards = document.getElementsByClassName("project-card");
101

102  Array.from(projectcards).forEach((card) => {
103    var image = card.getElementsByTagName('img')[0];
104    var cardHeight = card.clientHeight;
105    var minHeight = image.clientHeight - 35;
106
107    if (cardHeight < minHeight) {
108      card.style.height = minHeight + 'px';
109    }
110  })
111}
112
113// Load more functie voor agenda
114function loadMore() {
115  var hiddenDates = document.getElementsByClassName("future");
116  let length = hiddenDates.length;
117  Array.from(hiddenDates).forEach((date, index) => {
118    if (index < 4) {
119      date.classList.remove("future");
120    }
121  });
122
123  if (length < 4) {
124    document.getElementById("show-all").style.display = "none";
125  }
126}
127
128// Load more functie voor agenda page
129function loadMoreAgendaPage() {
130  var hiddenDates = document.getElementsByClassName("future--agenda_page");
131  let length = hiddenDates.length;
132  Array.from(hiddenDates).forEach((date, index) => {
133    if (index < 24) {
134      date.classList.remove("future--agenda_page");
135    }
136  });
137
138  if (length < 24) {
139    document.getElementById("show-all-agenda-page").style.display = "none";
140  }
141}
142
143// Load more functie voor agenda oude data
144function loadMoreOld() {
145  var hiddenDates = document.getElementsByClassName("old");
146  let length = hiddenDates.length;
147  Array.from(hiddenDates).forEach((date, index) => {
148    if (index < 4) {
149      date.classList.remove("old");
150    }
151  });
152
153  if (length < 4) {
154    document.getElementById("show-all-old").style.display = "none";
155  }
156}
157
158// Load more functie voor pers
159function loadMorePress() {
160  var hiddenDates = document.getElementsByClassName("pers_item--hidden");
161  let length = hiddenDates.length;
162  Array.from(hiddenDates).forEach((date, index) => {
163    if (index < 5) {
164      date.classList.remove("pers_item--hidden");
165    }
166  });
167
168  if (length < 5) {
169    document.getElementById("load-more-pers").style.display = "none";
170  }
171}
172
173// Load more functie voor gallery
174function loadMoreGallery() {
175  var hiddenDates = document.getElementsByClassName("gallery-cell--hidden");
176  let length = hiddenDates.length;
177  Array.from(hiddenDates).forEach((date, index) => {
178    if (index < 5) {
179      date.classList.remove("gallery-cell--hidden");
180    }
181  });
182
183  if (length < 5) {
184    document.getElementById("load-more-gallery").style.display = "none";
185  }
186}
187
188// Slick slider
189
190jQuery(document).ready(function () {
191  document.querySelectorAll('.slider, .sliderpers').forEach(element => {
192    var hasLightClass = element.classList.contains('slider-light');
193    jQuery(element).slick({
194      dots: false,
195      arrows: true,
196      slidesToShow: 1,
197      slidesToScroll: 1,
198      centerMode: true,
199      centerPadding: 0,
200      focusOnSelect: true,
201      prevArrow: hasLightClass ? "<button class='slider-prev'></button>" : "<button class='slider-prev slider-prev-dark'></button>",
202      nextArrow: hasLightClass ? "<button class='slider-next'></button>" : "<button class='slider-next slider-next-dark'></button>",
203      responsive: [{
204        breakpoint: 414,
205        variableWidth: true,
206        settings: {
207          slidesToShow: 1,
208          slidesToScroll: 1,
209        },
210      }, ],
211    });
212
213  });
214});
215
216//lightbox
217jQuery(document).ready(function () {
218
219  var arrowRightIcon = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
220viewBox="0 0 15.3 24" style="enable-background:new 0 0 15.3 24;" xml:space="preserve">
221<path class="st1" d="M0.5,21.2L9.7,12L0.5,2.8L3.3,0l12,12l-12,12L0.5,21.2z"/>
222</svg>`;
223
224  var arrowLeftIcon = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
225viewBox="0 0 15.3 24" style="enable-background:new 0 0 15.3 24;" xml:space="preserve">
226<path class="st1" d="M12.5,24l-12-12l12-12l2.8,2.8L6.1,12l9.2,9.2L12.5,24z"/>
227</svg>`;
228
229  var closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
230
231  var customLightboxHTML = `<div id="glightbox-body" class="glightbox-container">
232    <div class="gloader visible"></div>
233    <div class="goverlay"></div>
234    <div class="gcontainer">
235    <div id="glightbox-slider" class="gslider"></div>
236    <button class="gnext gbtn" tabindex="0" aria-label="Next" data-customattribute="example">${arrowRightIcon}</button>
237    <button class="gprev gbtn" tabindex="1" aria-label="Previous">${arrowLeftIcon}</button>
238    <button class="gclose gbtn" tabindex="2" aria-label="Close">${closeIcon}</button>
239</div>
240</div>`;
241  const lightbox = GLightbox({
242    lightboxHTML: customLightboxHTML,
243  });
244});