https://cibersaude.com.br/wp-content/themes/whitelabel/resources/js/gallery-slider.js?ver=1.0.0

1document.addEventListener('DOMContentLoaded', function () {
2  // Seleciona todas as galerias do WordPress
3  const galleries = document.querySelectorAll('.wp-block-gallery');
4
5  galleries.forEach(gallery => {
6    // Cria o container do slider
7    const sliderContainer = document.createElement('div');
8    sliderContainer.className = 'gallery-slider';
9    sliderContainer.style.display = 'none';
10    sliderContainer.style.position = 'fixed';
11    sliderContainer.style.top = '0';
12    sliderContainer.style.left = '0';
13    sliderContainer.style.width = '100%';
14    sliderContainer.style.height = '100%';
15    sliderContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
16    sliderContainer.style.zIndex = '1000';
17
18    // Cria o container das imagens
19    const slidesContainer = document.createElement('div');
20    slidesContainer.className = 'slides-container';
21    slidesContainer.style.display = 'flex';
22    slidesContainer.style.width = '100%';
23    slidesContainer.style.height = '100%';
24    slidesContainer.style.alignItems = 'center';
25    slidesContainer.style.justifyContent = 'center';
26    slidesContainer.style.position = 'relative';
27
28    // Cria os botões de navegação
29    const prevButton = document.createElement('button');
30    prevButton.innerHTML = '❮';
31    prevButton.className = 'slider-nav prev';
32    prevButton.style.position = 'absolute';
33    prevButton.style.left = '20px';
34    prevButton.style.top = '50%';
35    prevButton.style.transform = 'translateY(-50%)';
36    prevButton.style.background = 'none';
37    prevButton.style.border = 'none';
38    prevButton.style.color = 'white';
39    prevButton.style.fontSize = '40px';
40    prevButton.style.cursor = 'pointer';
41
42    const nextButton = document.createElement('button');
43    nextButton.innerHTML = '❯';
44    nextButton.className = 'slider-nav next';
45    nextButton.style.position = 'absolute';
46    nextButton.style.right = '20px';
47    nextButton.style.top = '50%';
48    nextButton.style.transform = 'translateY(-50%)';
49    nextButton.style.background = 'none';
50    nextButton.style.border = 'none';
51    nextButton.style.color = 'white';
52    nextButton.style.fontSize = '40px';
53    nextButton.style.cursor = 'pointer';
54
55    // Cria o container dos dots
56    const dotsContainer = document.createElement('div');
57    dotsContainer.className = 'dots-container';
58    dotsContainer.style.position = 'absolute';
59    dotsContainer.style.bottom = '20px';
60    dotsContainer.style.left = '50%';
61    dotsContainer.style.transform = 'translateX(-50%)';
62    dotsContainer.style.display = 'flex';
63    dotsContainer.style.gap = '10px';
64
65    // Cria o botão de fechar
66    const closeButton = document.createElement('button');
67    closeButton.innerHTML = '×';
68    closeButton.className = 'close-slider';
69    closeButton.style.position = 'absolute';
70    closeButton.style.top = '20px';
71    closeButton.style.right = '20px';
72    closeButton.style.background = 'none';
73    closeButton.style.border = 'none';
74    closeButton.style.color = 'white';
75    closeButton.style.fontSize = '40px';
76    closeButton.style.cursor = 'pointer';
77
78    // Adiciona os elementos ao container do slider
79    sliderContainer.appendChild(slidesContainer);
80    sliderContainer.appendChild(prevButton);
81    sliderContainer.appendChild(nextButton);
82    sliderContainer.appendChild(dotsContainer);
83    sliderContainer.appendChild(closeButton);
84
85    // Adiciona o slider ao body
86    document.body.appendChild(sliderContainer);
87
88    // Prepara as imagens para o slider
89    const images = gallery.querySelectorAll('img');
90    let currentSlide = 0;
91
92    images.forEach((img, index) => {
93      // Cria o slide
94      const slide = document.createElement('div');
95      slide.className = 'slide';
96      slide.style.display = 'none';
97      slide.style.width = '100%';
98      slide.style.height = '100%';
99      slide.style.textAlign = 'center';
100      slide.style.display = 'flex';
101      slide.style.alignItems = 'center';
102      slide.style.justifyContent = 'center';
103
104      // Cria o container da imagem
105      const imgContainer = document.createElement('div');
106      imgContainer.style.maxWidth = '90%';
107      imgContainer.style.height = '100%';
108      imgContainer.style.margin = 'auto';
109      imgContainer.style.display = 'flex';
110      imgContainer.style.flexDirection = 'column';
111      imgContainer.style.alignItems = 'center';
112      imgContainer.style.justifyContent = 'center';

113      imgContainer.style.gap = '20px';
114
115      // Cria a imagem para o slider
116      const sliderImg = document.createElement('img');
117      sliderImg.src = img.src;
118      sliderImg.style.maxWidth = '100%';
119      sliderImg.style.maxHeight = 'calc(100vh - 120px)';
120      sliderImg.style.objectFit = 'contain';
121      sliderImg.style.display = 'block';
122      sliderImg.style.margin = '0 auto';
123
124      // Adiciona a legenda se existir
125      const caption = img.parentElement.querySelector('.wp-element-caption');
126      if (caption) {
127        const captionElement = document.createElement('div');
128        captionElement.className = 'slider-caption';
129        captionElement.style.color = 'white';
130        captionElement.style.textAlign = 'center';
131        captionElement.style.maxWidth = '100%';
132        captionElement.style.padding = '0 20px';
133        captionElement.style.fontSize = '16px';
134        captionElement.style.lineHeight = '1.4';
135        captionElement.textContent = caption.textContent;
136        imgContainer.appendChild(sliderImg);
137        imgContainer.appendChild(captionElement);
138      } else {
139        imgContainer.appendChild(sliderImg);
140      }
141
142      slide.appendChild(imgContainer);
143      slidesContainer.appendChild(slide);
144
145      // Cria o dot
146      const dot = document.createElement('span');
147      dot.className = 'dot';
148      dot.style.width = '10px';
149      dot.style.height = '10px';
150      dot.style.borderRadius = '50%';
151      dot.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
152      dot.style.cursor = 'pointer';
153      dotsContainer.appendChild(dot);
154
155      // Adiciona evento de clique na imagem original
156      img.style.cursor = 'pointer';
157      img.addEventListener('click', () => {
158        currentSlide = index;
159        showSlide(currentSlide);
160        sliderContainer.style.display = 'block';
161        document.body.style.overflow = 'hidden';
162      });
163
164      // Adiciona evento de clique no dot
165      dot.addEventListener('click', () => {
166        currentSlide = index;
167        showSlide(currentSlide);
168      });
169    });
170
171    // Função para mostrar o slide atual
172    function showSlide (n) {
173      const slides = slidesContainer.querySelectorAll('.slide');
174      const dots = dotsContainer.querySelectorAll('.dot');
175

176      slides.forEach(slide => slide.style.display = 'none');
177      dots.forEach(dot => dot.style.backgroundColor = 'rgba(255, 255, 255, 0.5)');
178
179      slides[n].style.display = 'block';
180      dots[n].style.backgroundColor = 'white';
181    }
182
183    // Eventos dos botões de navegação
184    prevButton.addEventListener('click', () => {
185      currentSlide = (currentSlide - 1 + images.length) % images.length;
186      showSlide(currentSlide);
187    });
188
189    nextButton.addEventListener('click', () => {
190      currentSlide = (currentSlide + 1) % images.length;
191      showSlide(currentSlide);
192    });
193
194    // Evento do botão de fechar
195    closeButton.addEventListener('click', () => {
196      sliderContainer.style.display = 'none';
197      document.body.style.overflow = 'auto';
198    });
199
200    // Evento de teclado
201    document.addEventListener('keydown', (e) => {
202      if (sliderContainer.style.display === 'block') {
203        if (e.key === 'Escape') {
204          sliderContainer.style.display = 'none';
205          document.body.style.overflow = 'auto';
206        } else if (e.key === 'ArrowLeft') {
207          currentSlide = (currentSlide - 1 + images.length) % images.length;
208          showSlide(currentSlide);
209        } else if (e.key === 'ArrowRight') {
210          currentSlide = (currentSlide + 1) % images.length;
211          showSlide(currentSlide);
212        }
213      }
214    });
215  });
216});