https://childrenshha.com/wp-content/themes/circlescocollective-og/js/circles-custom-template.js?ver=1773173606

1
2jQuery(document).ready(function ($) {
3	
4	$('.gallery-images').each(function() {
5		$(this).magnificPopup({
6			delegate: 'a',
7			type: 'image',
8			gallery: {
9					enabled: true
10			}
11		});
12	});
13
14		
15})
16
17	// 	Changes padding for Custom Template
18	document.addEventListener('DOMContentLoaded', function() {
19		function adjustPadding() {
20		  if (document.body.classList.contains('page-template-page-custom-template')) {
21			const elements = document.querySelectorAll(
22			  'div.section[style*="padding-top"], div.section[style*="padding-bottom"], div.overlay[style*="padding-top"], div.overlay[style*="padding-bottom"], div.ct-wrapper[style*="padding-top"], div.ct-wrapper[style*="padding-bottom"]'
23			);
24	  
25			elements.forEach(function(el) {
26			  const originalStyle = el.getAttribute('data-original-style') || el.getAttribute('style');
27	  
28			  // Save the original style if not already saved
29			  if (!el.hasAttribute('data-original-style')) {
30				el.setAttribute('data-original-style', originalStyle);
31			  }
32	  
33			  let style = originalStyle;
34	  
35			  if (el.classList.contains('ct-wrapper')) {
36				if (window.innerWidth <= 500) {
37				  style = style.replace(/padding-top:.*?;/g, 'padding-top: 40px !important;');
38				  style = style.replace(/padding-bottom:.*?;/g, 'padding-bottom: 40px !important;');
39				} else if (window.innerWidth <= 1200) {
40				  style = style.replace(/padding-top:.*?;/g, 'padding-top: 80px !important;');
41				  style = style.replace(/padding-bottom:.*?;/g, 'padding-bottom: 80px !important;');
42				} else {
43				  style = originalStyle;
44				}
45			  } else {
46				if (window.innerWidth <= 500) {
47				  style = style.replace(/padding-top:.*?;/g, 'padding-top: 40px !important;');
48				  style = style.replace(/padding-bottom:.*?;/g, 'padding-bottom: 40px !important;');
49				} else if (window.innerWidth <= 1200) {
50				  style = style.replace(/padding-top:.*?;/g, 'padding-top: 160px !important;');
51				  style = style.replace(/padding-bottom:.*?;/g, 'padding-bottom: 160px !important;');
52				} else {
53				  style = originalStyle;
54				}
55			  }
56	  
57			  el.setAttribute('style', style);
58			});
59		  }
60		}
61	  
62		// Initial adjustment
63		adjustPadding();
64	  
65		// Adjust on window resize
66		window.addEventListener('resize', adjustPadding);
67	});
68
69
70	// Dynamically adjusts the grid row span for images in the gallery based on their height.
71	document.addEventListener("DOMContentLoaded", function () {
72		function setMasonryGrid() {
73			document.querySelectorAll(".gallery-images img").forEach(img => {
74				img.onload = function () {
75					let rowSpan = Math.ceil(img.getBoundingClientRect().height / 10); // Adjust based on grid-auto-rows
76					img.parentElement.style.gridRowEnd = `span ${rowSpan}`;
77				};
78			});
79		}
80		setMasonryGrid(); // Run on load
81		window.addEventListener("resize", setMasonryGrid); // Adjust on resize
82	});
83	
84	// Adjusts the padding of the overlay element when the screen width is less than 501px and restores the original padding when resized above that threshold.
85	document.addEventListener('DOMContentLoaded', function() {
86		function adjustOverlayPadding() {
87			// Check if screen width is less than 501px
88			if (window.innerWidth < 501) {
89				document.querySelectorAll('.section-spacing-outer').forEach(function(section) {
90					const overlay = section.querySelector('.overlay');
91					if (overlay) {
92						const originalStyle = overlay.getAttribute('data-original-style') || overlay.getAttribute('style');
93	
94						// Save original styles if not already saved
95						if (!overlay.hasAttribute('data-original-style')) {
96							overlay.setAttribute('data-original-style', originalStyle);
97						}
98	
99						// Update padding
100						let updatedStyle = originalStyle;
101						updatedStyle = updatedStyle.replace(/padding-top:.*?;/g, 'padding-top: 40px !important;');
102						updatedStyle = updatedStyle.replace(/padding-bottom:.*?;/g, 'padding-bottom: 40px !important;');
103	
104						overlay.setAttribute('style', updatedStyle);
105					}
106				});
107			} else {
108				// Restore original styles when screen width is larger
109				document.querySelectorAll('.overlay[data-original-style]').forEach(function(overlay) {
110					overlay.setAttribute('style', overlay.getAttribute('data-original-style'));
111				});
112			}
113		}
114		// Run on DOM ready
115		adjustOverlayPadding();
116		// Run on window resize
117		window.addEventListener('resize', adjustOverlayPadding);
118	});