Galeria Julio 2021
Se ha producido un error al procesar la plantilla.
The following has evaluated to null or missing:
==> idGaleria [in template "20096#20121#316920" at line 1, column 23]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign idGaleria = "${idGaleria.getD... [in template "20096#20121#316920" at line 1, column 1]
----
1<#assign idGaleria="${idGaleria.getData()}" />
2<#assign idSwiperGaleria1=0 />
3<#assign idSwiperGaleria2=0 />
4<#if "${idGaleria}"=="1">
5 <#assign idSwiperGaleria1="" />
6 <#assign idSwiperGaleria2=2 />
7</#if>
8<#if "${idGaleria}"=="2">
9 <#assign idSwiperGaleria1=3 />
10 <#assign idSwiperGaleria2=4 />
11</#if>
12<#if "${idGaleria}"=="3">
13 <#assign idSwiperGaleria1=5 />
14 <#assign idSwiperGaleria2=6 />
15</#if>
16<#if "${idGaleria}"=="4">
17 <#assign idSwiperGaleria1=7 />
18 <#assign idSwiperGaleria2=8 />
19</#if>
20<#if "${idGaleria}"=="5">
21 <#assign idSwiperGaleria1=9 />
22 <#assign idSwiperGaleria2=10 />
23</#if>
24<#if "${idGaleria}" == "1">
25<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
26<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
27 integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
28<#else>
29</#if>
30<style>
31#containerGaleria${idGaleria} {
32 width: 100%;
33 max-width: 900px;
34 height: 520px;
35 margin: auto;
36 background: #313030;
37 color: #000;
38}
39
40.mySwiper${idSwiperGaleria2} {
41 height: 80%;
42 width: 100%;
43}
44
45.mySwiper${idSwiperGaleria2} .swiper-wrapper,
46.carruselGaleria${idGaleria} {
47 height: 100%;
48}
49
50.swiper-slide img {
51 width: 100%;
52 height: 100%;
53 object-fit: cover;
54}
55
56.mySwiper${idSwiperGaleria1} {
57 height: 20%;
58 width: 100%;
59 box-sizing: border-box;
60 padding: 10px 5px !important;
61}
62
63.mySwiper${idSwiperGaleria1} .swiper-slide {
64 height: 100%;
65 opacity: 0.4;
66 border: 2px #fff solid;
67}
68.mySwiper${idSwiperGaleria2} .swiper-slide img {
69 height: 100%;
70 object-fit: contain;
71}
72.mySwiper${idSwiperGaleria1} .swiper-slide-thumb-active {
73 opacity: 1;
74}
75
76.btns-galeria${idGaleria} {
77 color: #676868;
78 margin: auto;
79 display: grid;
80 grid-template-columns: 1fr 1fr 1fr;
81 justify-items: center;
82 transition: all 0.5s ease;
83 position: relative;
84 top: -10px;
85}
86
87.btns-galeria${idGaleria} i {
88 cursor: pointer;
89 margin: 0;
90}
91
92.btns-galeria${idGaleria} .fa-solid:hover {
93 color: #fff;
94}
95
96/*btn-hidde-galeria*/
97.sliderPrincipal${idGaleria}.active {
98 height: 95%;
99 width: 100%;
100}
101
102.footerGaleria${idGaleria}.active {
103 height: 5%;
104 width: 100%;
105 box-sizing: border-box;
106}
107
108.footerGaleria${idGaleria} .carruselGaleria${idGaleria}.active {
109 visibility: collapse;
110}
111</style>
112<div id="containerGaleria${idGaleria}">
113 <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
114 class="swiper mySwiper${idSwiperGaleria2} sliderPrincipal${idGaleria}" id="sliderPrincipal${idGaleria}">
115 <div class="swiper-wrapper">
116 <#if SetImagenGaleria.getSiblings()?has_content>
117 <#list SetImagenGaleria.getSiblings() as cur_SetImagenGaleria>
118 <#if (cur_SetImagenGaleria.getData())?? && cur_SetImagenGaleria.getData() !="">
119 <div class="swiper-slide">
120 <div class="swiper-zoom-container">
121 <img alt="${cur_SetImagenGaleria.getAttribute("alt")}" data-fileentryid="${cur_SetImagenGaleria.getAttribute("fileEntryId")}" src="${cur_SetImagenGaleria.getData()}" />
122 </div>
123 </div>
124 </#if>
125 </#list>
126 </#if>
127 </div>
128 <div class="swiper-button-prev"></div>
129 <div class="swiper-button-next"></div>
130 </div>
131 <div thumbsSlider="" class="swiper mySwiper${idSwiperGaleria1} footerGaleria${idGaleria}">
132 <div class="btns-galeria${idGaleria}">
133 <div class=""><i class="fa-solid fa-play fa-lg btn-play-galeria${idGaleria}"></i></div>
134 <div class=""><i class="fa-solid fa-down-long fa-lg btn-hidde-galeria${idGaleria}"></i></div>
135 <div class=""><i class="fa-solid fa-maximize fa-lg btn-fullscreen-galeria${idGaleria}"></i></div>
136 </div>
137 <div class="swiper-wrapper carruselGaleria${idGaleria}">
138 <#if SetImagenGaleria.getSiblings()?has_content>
139 <#list SetImagenGaleria.getSiblings() as cur_SetImagenGaleria>
140 <#if (cur_SetImagenGaleria.getData())?? && cur_SetImagenGaleria.getData() !="">
141 <div class="swiper-slide">
142 <img alt="${cur_SetImagenGaleria.getAttribute("alt")}" data-fileentryid="${cur_SetImagenGaleria.getAttribute("fileEntryId")}" src="${cur_SetImagenGaleria.getData()}" />
143 </div>
144 </#if>
145 </#list>
146 </#if>
147 </div>
148 </div>
149</div>
150<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
151<!--<script src="/documents/20119/50939/main.js"></script>-->
152<script>
153const swiper${idSwiperGaleria1} = new Swiper(".mySwiper${idSwiperGaleria1}", {
154 loop: true,
155 spaceBetween: 5,
156 slidesPerView: 8,
157 freeMode: true,
158 watchSlidesProgress: true,
159});
160const swiper${idSwiperGaleria2} = new Swiper(".mySwiper${idSwiperGaleria2}", {
161 loop: true,
162 spaceBetween: 10,
163 zoom: true,
164 navigation: {
165 nextEl: ".swiper-button-next",
166 prevEl: ".swiper-button-prev",
167 },
168 thumbs: {
169 swiper: swiper${idSwiperGaleria1},
170 },
171});
172const btnPlay${idGaleria} = document.querySelector(".btn-play-galeria${idGaleria}"),
173 btnFullScreen${idGaleria} = document.querySelector(".btn-fullscreen-galeria${idGaleria}"),
174 btnHidde${idGaleria} = document.querySelector(".btn-hidde-galeria${idGaleria}");
175//Elementos HTML
176const footerGaleria${idGaleria} = document.querySelector('.carruselGaleria${idGaleria}');
177const sliderPrincipal${idGaleria} = document.querySelector('.sliderPrincipal${idGaleria}');
178const imgSlider${idGaleria} = document.querySelectorAll('.imagenSliderPrincipal${idGaleria}');
179const galeriaComp${idGaleria} = document.querySelector("#containerGaleria${idGaleria}");
180//btn-play
181btnPlay${idGaleria}.addEventListener('click', () => {
182 if (swiper${idSwiperGaleria2}.autoplay.running) {
183 // Detén el autoplay si está en ejecución
184 if (btnPlay${idGaleria}.classList.contains('fa-pause')) {
185 btnPlay${idGaleria}.classList.replace('fa-pause', 'fa-play')
186 }
187 swiper${idSwiperGaleria2}.autoplay.stop();
188 } else {
189 // Inicia el autoplay si no está en ejecución
190 if (btnPlay${idGaleria}.classList.contains('fa-play')) {
191 btnPlay${idGaleria}.classList.replace('fa-play', 'fa-pause')
192 }
193 swiper$[idSwiperGaleria2].autoplay.start();
194 }
195});
196//Btn-FullScreen
197btnFullScreen${idGaleria}.addEventListener('click', () => {
198 if (document.webkitFullscreenElement) {
199 document.webkitCancelFullScreen();
200 if (btnFullScreen${idGaleria}.classList.contains('fa-minimize')) {
201 btnFullScreen${idGaleria}.classList.replace('fa-minimize', 'fa-maximize');
202 }
203 } else {
204 galeriaComp${idGaleria}.webkitRequestFullScreen();
205 if (btnFullScreen${idGaleria}.classList.contains('fa-maximize')) {
206 btnFullScreen${idGaleria}.classList.replace('fa-maximize', 'fa-minimize');
207 }
208 }
209});
210//Btn-Hidden
211btnHidde${idGaleria}.addEventListener('click', () => {
212 footerGaleria${idGaleria}.classList.toggle('active');
213 sliderPrincipal${idGaleria}.classList.toggle('active');
214 if (btnHidde${idGaleria}.classList.contains('fa-down-long')) {
215 btnHidde${idGaleria}.classList.replace('fa-down-long', 'fa-up-long');
216 } else {
217 btnHidde${idGaleria}.classList.replace('fa-up-long', 'fa-down-long');
218 }
219});
220</script>
