1(function($){ 2 $(function () { 3 // grab all galleries 4 const galleries = $('.imt-gallery'); 5 const body = $('body'); 6 7 //for reach gallery 8 galleries.each(function(){ 9 let gallery = $(this); 10 let figures = gallery.find("figure:not(.lightbox)"); 11 12 13 //check if the gallery has pagination enabled 14 let imagesPerLoad = -1; 15 if(gallery.attr('data-images-per-load')){ 16 imagesPerLoad = gallery.attr('data-images-per-load'); 17 } 18 19 //if pagination is enabled set up load more button 20 if(imagesPerLoad != -1){ 21 let loadMore = gallery.next('.imt-gallery-load').find('a'); 22 loadMore.off("click"); 23 loadMore.click(function(){ 24 let start = gallery.find("figure:not(.lightbox)[aria-hidden='true']").first(); 25 for(let i = 0; i < imagesPerLoad; i++){ 26 start.attr("aria-hidden", "false"); 27 start = start.nextAll("figure:not(.lightbox)[aria-hidden='true']").first(); 28 if(start.length == 0){ 29 i = imagesPerLoad; 30 loadMore.hide(); 31 } 32 } 33 }); 34 } 35 36 //grab all figures. For each figure 37 figures.each(function(){ 38 let figure = $(this); 39 let gallery = figure.parent(); 40 let link = figure.children("a"); 41 let picture = figure.find("img"); 42 //set up a click function on the link to trigger the lightbox 43 link.click(function(){ 44 let lightbox = $(` 45 <figure class='lightbox' aria-hidden='false'> 46 <i class="fa fa-close" aria-hidden="false"></i> 47 <i class="fa-solid fa-chevron-left" aria-hidden="false"></i> 48 <i class="fa-solid fa-chevron-right" aria-hidden="false"></i> 49 <a href='javascript:;'> 50 <img src='${picture.attr('src')}' alt='${picture.attr('alt')}'> 51 </a> 52 </figure> 53 `); 54 body.prepend(lightbox); 55 56 closeIcon = lightbox.find('.fa-close'); 57 lefticon = lightbox.find('.fa-chevron-left'); 58 righticon = lightbox.find('.fa-chevron-right'); 59 image = lightbox.find('img'); 60 let currentFigure = figure; 61 62 $(document).on("click", ".lightbox .fa-close", closeLightbox); 63 $(document).on("click", ".lightbox a", closeLightbox); 64 $(document).on("click", ".lightbox .fa-chevron-left", () => changeImage('prev')); 65 $(document).on("click", ".lightbox .fa-chevron-right", () => changeImage('next')); 66 $(document).on("keydown", function(event) { 67 if (event.key === "ArrowLeft") { 68 changeImage('prev'); 69 } else if (event.key === "ArrowRight") { 70 changeImage('next'); 71 } else if (event.key === "Escape") { 72 closeLightbox(); 73 } 74 }); 75 76 function closeLightbox(){ 77 currentFigure.children("a").trigger( "focus" ); 78 if(lightbox){lightbox.remove();} 79 } 80 81 function changeImage(direction){ 82 let targetFigure = direction === 'prev' ? currentFigure.prev('figure') : currentFigure.next('figure'); 83 84 if(targetFigure.length === 0){ 85 targetFigure = direction === 'prev' ? gallery.find('figure').last() : gallery.find('figure').first(); 86 } 87 88 let newImage = targetFigure.find('img'); 89 90 image.attr({ 91 'src' : newImage.attr('src'), 92 'alt' : newImage.attr('alt') 93 }); 94 95 currentFigure = targetFigure; 96 } 97 }); 98 }); 99 }); 100 101 //grab all category button groups 102 const categories = $('.imt-gallery-categories'); 103 const animationDuration = parseInt(getComputedStyle(document.body).getPropertyValue('--wp--custom--imt--gallery--animation-duration')); 104 categories.each(function(){ 105 let buttonGroup = $(this); 106 let buttons = buttonGroup.children('.imt-btn-wrapper'); 107 let gallery = buttonGroup.next(); 108 let animation = buttonGroup.attr("data-animation"); 109 110 //for each button 111 buttons.each(function(){ 112 galleryButtons($(this), animation); 113 }); 114 115 //on click event for all category buttons 116 function categoryButton(param){ 117 let buttons = param.data[0]; 118 let button = param.data[1] 119 let gallery = param.data[2] 120 let galleryInner = gallery.children('.imt-gallery-wrapper-inner'); 121 let category = param.data[3]; 122 let animation = param.data[4]; 123 124 let loadMore = buttons.parent().nextAll('.imt-gallery-load').find('a');
125 loadMore.hide(); 126 127 // remove all active states 128 $('.imt-gallery-categories a.imt-btn').removeClass('imt-btn-active'); 129 // mark current button as active 130 button.addClass('imt-btn-active'); 131 132 //remove all the other click events so animations can't be doubled up 133 buttons.each(function(){ 134 $(this).children('a').off('click'); 135 }); 136 137 //check if we have an animation 138 if(animation != 'imt-gal-none'){ 139 //set the height of the outer container to make the transition less jarring 140 let height = gallery.height(); 141 gallery.css("height",height); 142 //check which animation it is 143 if(animation == 'imt-gal-fade'){ 144 galleryInner.animate({ 145 "opacity":"toggle" 146 },animationDuration); 147 categoryButtonTrigger(animationDuration,gallery,category); 148 gallery.css("height",""); 149 galleryInner.animate({ 150 "opacity":"toggle" 151 },animationDuration + 150); 152 }else if(animation == 'imt-gal-up'){ 153 galleryInner.animate({ 154 "height":"toggle", 155 "opacity": "toggle" 156 },animationDuration); 157 categoryButtonTrigger(animationDuration,gallery,category); 158 setTimeout(function(){ 159 gallery.css("height",""); 160 },animationDuration + 150); 161 galleryInner.animate({ 162 "height":"toggle", 163 "opacity": "toggle" 164 },animationDuration + 150); 165 }else if(animation =='imt-gal-left'){ 166 galleryInner.animate({ 167 "opacity": "toggle", 168 "width": "toggle" 169 },animationDuration); 170 categoryButtonTrigger(animationDuration,gallery,category); 171 setTimeout(function(){ 172 gallery.css("height",""); 173 },animationDuration + 150); 174 galleryInner.animate({ 175 176 "opacity": "toggle", 177 "width": "toggle" 178 },animationDuration + 150); 179 }else if(animation=='imt-gal-right'){ 180 galleryInner.css("margin-left", "auto"); 181 galleryInner.animate({ 182 "opacity": "toggle", 183 "width": "toggle" 184 },animationDuration); 185 categoryButtonTrigger(animationDuration,gallery,category); 186 setTimeout(function(){ 187 gallery.css("height",""); 188 setTimeout(function(){galleryInner.css("margin-left", "");},animationDuration + 150); 189 },animationDuration + 150); 190 galleryInner.animate({ 191 "opacity": "toggle", 192 "width": "toggle" 193 },animationDuration + 150); 194 }else if(animation=='imt-gal-middle'){ 195 galleryInner.css("margin", "auto"); 196 galleryInner.animate({ 197 "opacity": "toggle", 198 "width": "toggle" 199 },animationDuration); 200 categoryButtonTrigger(animationDuration,gallery,category); 201 setTimeout(function(){ 202 gallery.css("height",""); 203 setTimeout(function(){galleryInner.css("margin", "");},animationDuration + 150); 204 },animationDuration + 150); 205 galleryInner.animate({ 206 "opacity": "toggle", 207 "width": "toggle" 208 },animationDuration + 150); 209 } 210 //reinitialize the buttons 211 setTimeout(function(){ 212 buttons.each(function(){ 213 galleryButtons($(this),animation); 214 }); 215 button.off('click'); 216 },animationDuration + animationDuration + 150); 217 }else{ 218 categoryButtonTrigger(0,gallery,category); 219 gallery.css("height",""); 220 buttons.each(function(){ 221 galleryButtons($(this),animation); 222 }); 223 button.off('click'); 224 } 225 226 } 227 228 //functionality to trigger the effect of the button seperate from animations 229 function categoryButtonTrigger(animationDuration,gallery, category){ 230 let childrenHide = gallery.find('figure:not(.lightbox):not([data-category*="'+category+'"])'); 231 //after a delay based on the animation duration show and hide all the respective images. 232 setTimeout(function(){ 233 childrenHide.each(function(){ 234 let child = $(this); 235 child.hide(); 236 }); 237 //Show images with the category 238 let childrenShow = gallery.find('figure:not(.lightbox)[data-category*="'+category+'"]'); 239 childrenShow.each(function(){ 240 let child = $(this); 241 child.show(); 242 }); 243 },animationDuration); 244 } 245 246 //functionality to trigger the effect of the All button seperate from animations 247 function allButtonTrigger(animationDuration,gallery){ 248 let children = gallery.find('figure:not(.lightbox)'); 249 setTimeout(function(){ 250 children.each(function(){ 251 let child = $(this); 252 child.show(); 253 }); 254 },animationDuration); 255 256 } 257 258 //on click event for all button 259 function showAll(param){ 260 let buttons = param.data[0]; 261 let button = param.data[1] 262 let gallery = param.data[2]; 263 let animation = param.data[3]; 264 let galleryInner = gallery.children('.imt-gallery-wrapper-inner'); 265 266 let loadMore = buttons.parent().next().next('.imt-gallery-load').find('a');
267 loadMore.hide(); 268 269 // remove all active states 270 $('.imt-gallery-categories a.imt-btn').removeClass('imt-btn-active'); 271 // mark current button as active 272 button.addClass('imt-btn-active'); 273 274 //turn off all other event handlers so animations don't get doubled up 275 buttons.each(function(){ 276 $(this).children('a').off('click'); 277 }); 278 279 //check if there is an animation selected 280 if(animation != 'imt-gal-none'){ 281 //set the height of the outer container to make the transition less jarring 282 let height = gallery.height(); 283 gallery.css("height",height); 284 if(animation == 'imt-gal-fade'){ 285 galleryInner.animate({ 286 "opacity":"toggle" 287 },animationDuration); 288 allButtonTrigger(animationDuration,gallery); 289 gallery.css("height",""); 290 galleryInner.animate({ 291 "opacity":"toggle" 292 },animationDuration + 150); 293 }else if(animation == 'imt-gal-up'){ 294 galleryInner.animate({ 295 "height":"toggle", 296 "opacity": "toggle" 297 },animationDuration); 298 allButtonTrigger(animationDuration,gallery); 299 setTimeout(function(){ 300 gallery.css("height",""); 301 },animationDuration + 150); 302 galleryInner.animate({ 303 "height":"toggle", 304 "opacity": "toggle" 305 },animationDuration + 150); 306 }else if(animation =='imt-gal-left'){ 307 galleryInner.animate({ 308 "opacity": "toggle", 309 "width": "toggle" 310 },animationDuration); 311 allButtonTrigger(animationDuration,gallery); 312 setTimeout(function(){ 313 gallery.css("height",""); 314 },animationDuration + 150); 315 galleryInner.animate({ 316 317 "opacity": "toggle", 318 "width": "toggle" 319 },animationDuration + 150); 320 }else if(animation=='imt-gal-right'){ 321 galleryInner.css("margin-left", "auto"); 322 galleryInner.animate({ 323 "opacity": "toggle", 324 "width": "toggle" 325 },animationDuration); 326 allButtonTrigger(animationDuration,gallery); 327 setTimeout(function(){ 328 gallery.css("height",""); 329 setTimeout(function(){galleryInner.css("margin-left", "");},animationDuration + 150); 330 },animationDuration + 150); 331 galleryInner.animate({ 332 "opacity": "toggle", 333 "width": "toggle" 334 },animationDuration + 150); 335 }else if(animation=='imt-gal-middle'){ 336 galleryInner.css("margin", "auto"); 337 galleryInner.animate({ 338 "opacity": "toggle", 339 "width": "toggle" 340 },animationDuration); 341 allButtonTrigger(animationDuration,gallery); 342 setTimeout(function(){ 343 gallery.css("height",""); 344 setTimeout(function(){galleryInner.css("margin", "");},animationDuration + 150); 345 },animationDuration + 150); 346 galleryInner.animate({ 347 "opacity": "toggle", 348 "width": "toggle" 349 },animationDuration + 150); 350 } 351 setTimeout(function(){ 352 buttons.each(function(){ 353 galleryButtons($(this),animation); 354 }); 355 button.off('click'); 356 },animationDuration + animationDuration + 150); 357 }else{ 358 allButtonTrigger(0,gallery); 359 gallery.css("height",""); 360 buttons.each(function(){ 361 galleryButtons($(this),animation); 362 }); 363 button.off('click'); 364 } 365 } 366 367 //initialize click events for the buttons 368 function galleryButtons(button, animation){ 369 button = button.children('a'); 370 let category = button.attr('data-category'); 371 //if it's not the "All" button 372 if(category != ''){ 373 button.off('click'); 374 button.on('click', [buttons, button, gallery,category,animation], categoryButton); 375 //if it's the 'All' button 376 }else{ 377 button.off('click'); 378 button.on('click', [buttons, button, gallery,animation], showAll); 379 } 380 } 381 }); 382 383 }); 384})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.