{"id":322,"date":"2024-09-18T10:07:21","date_gmt":"2024-09-18T08:07:21","guid":{"rendered":"https:\/\/cesebe.es\/?page_id=322"},"modified":"2024-09-18T12:07:21","modified_gmt":"2024-09-18T10:07:21","slug":"stills","status":"publish","type":"page","link":"https:\/\/cesebe.es\/en\/ficcion\/asimetrica\/stills\/","title":{"rendered":"Stills Asim\u00e9trica"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n Image Mosaic and Preview<\/title>\r\n <style>\r\n \/* Estilo para el mosaico de im\u00e1genes *\/\r\n .mosaic-container {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr); \/* Cambiar a 4 columnas *\/\r\n gap: 10px;\r\n padding: 10px;\r\n }\r\n\r\n .mosaic-item {\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .mosaic-item img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .mosaic-item:hover img {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Estilo para la vista previa *\/\r\n .preview-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.8);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 9999;\r\n }\r\n\r\n .preview-container {\r\n position: relative;\r\n max-width: 90%;\r\n max-height: 90%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 0 50px;\r\n }\r\n\r\n .preview-container img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n }\r\n\r\n .preview-arrow {\r\n position: absolute;\r\n top: 50%;\r\n bottom: 50%;\r\n width: 40px;\r\n height: 40px;\r\n background: rgba(0, 0, 0, 0.7);\r\n color: white;\r\n font-size: 24px;\r\n text-align: center;\r\n line-height: 40px;\r\n cursor: pointer;\r\n user-select: none;\r\n z-index: 10;\r\n transition: background 0.3s ease, color 0.3s ease;\r\n border-radius: 50%;\r\n }\r\n\r\n .preview-arrow.left {\r\n left: 20px;\r\n }\r\n\r\n .preview-arrow.right {\r\n right: 20px;\r\n }\r\n\r\n .preview-arrow.highlight {\r\n background: white;\r\n color: black;\r\n }\r\n\r\n \/* Estilo para el bot\u00f3n de cerrar *\/\r\n .close-btn {\r\n position: fixed;\r\n top: 20px;\r\n right: 20px;\r\n width: 40px;\r\n height: 40px;\r\n background: rgba(0, 0, 0, 0.7);\r\n color: white;\r\n font-size: 24px;\r\n text-align: center;\r\n line-height: 40px;\r\n cursor: pointer;\r\n border-radius: 50%;\r\n user-select: none;\r\n z-index: 11;\r\n transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;\r\n }\r\n\r\n .close-btn:hover {\r\n background: white;\r\n color: black;\r\n transform: scale(1.2);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Contenedor del mosaico -->\r\n <div class=\"mosaic-container\" id=\"mosaicContainer\">\r\n <!-- Las im\u00e1genes se cargar\u00e1n aqu\u00ed din\u00e1micamente -->\r\n <\/div>\r\n\r\n <!-- Contenedor de la vista previa -->\r\n <div class=\"preview-overlay\" id=\"previewOverlay\">\r\n <div class=\"preview-arrow left\" id=\"prevArrow\"><<\/div>\r\n <div class=\"preview-container\" id=\"previewContainer\">\r\n <img decoding=\"async\" id=\"previewImage\" class=\"preview-image\" src=\"\" alt=\"Preview\">\r\n <div class=\"close-btn\" id=\"closeBtn\">×<\/div>\r\n <\/div>\r\n <div class=\"preview-arrow right\" id=\"nextArrow\">><\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Datos de las im\u00e1genes y enlaces\r\n const imageData = [\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_37_24.Still001.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520120789&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_37_24.Still001.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_37_24.Still001.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519916605&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_37_24.Still001.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 1'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_37_01.Still002.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520126369&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_37_01.Still002.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_37_01.Still002.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519905049&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_37_01.Still002.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 2'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_43_15.Still003.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520131035&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_43_15.Still003.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_43_15.Still003.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519936745&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_43_15.Still003.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 3'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_49_18.Still004.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520135151&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_49_18.Still004.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_49_18.Still004.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519941470&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_49_18.Still004.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 4'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_53_12.Still006.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520139217&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_53_12.Still006.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_53_12.Still006.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519950535&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_00_53_12.Still006.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 5'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_03_06.Still007.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520144143&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_03_06.Still007.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_03_06.Still007.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519955152&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_03_06.Still007.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 6'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_28_22.Still008.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520149361&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_28_22.Still008.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_28_22.Still008.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519959684&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_28_22.Still008.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 7'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_34_01.Still009.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520153497&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_34_01.Still009.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_34_01.Still009.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519964688&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_34_01.Still009.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 8'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_41_01.Still010.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520157761&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_41_01.Still010.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_41_01.Still010.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519970518&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_41_01.Still010.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 9'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_57_07.Still011.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520162183&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_57_07.Still011.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_57_07.Still011.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519978936&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_01_57_07.Still011.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 10'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_06_00.Still012.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520167023&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_06_00.Still012.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_06_00.Still012.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519984022&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_06_00.Still012.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 11'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_09_01.Still013.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520171730&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_09_01.Still013.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_09_01.Still013.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519988337&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_09_01.Still013.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 12'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_16_01.Still014.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520188035&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_16_01.Still014.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_16_01.Still014.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519994658&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_16_01.Still014.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 13'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_14_18.Still015.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520193183&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_14_18.Still015.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_14_18.Still015.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726519999973&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_14_18.Still015.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 14'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_25_19.Still016.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520198454&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_25_19.Still016.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_25_19.Still016.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520005618&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_25_19.Still016.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 15'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_26_15.Still017.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520206105&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_26_15.Still017.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_26_15.Still017.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520010437&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_26_15.Still017.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 16'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_27_11.Still018.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520259227&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_27_11.Still018.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_27_11.Still018.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520015042&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_27_11.Still018.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 17'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_28_14.Still019.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520264763&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_28_14.Still019.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_28_14.Still019.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520021764&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_28_14.Still019.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 18'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_31_12.Still020.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520269300&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_31_12.Still020.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_31_12.Still020.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520026740&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_31_12.Still020.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 19'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_32_04.Still021.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520273775&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_32_04.Still021.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_32_04.Still021.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520031934&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_32_04.Still021.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 20'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_34_08.Still022.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520279097&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_34_08.Still022.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_34_08.Still022.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520037762&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_34_08.Still022.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 21'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_44_08.Still023.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520284409&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_44_08.Still023.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_44_08.Still023.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520042730&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_44_08.Still023.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 22'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_47_14.Still024.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520289376&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_47_14.Still024.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_47_14.Still024.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520047988&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_47_14.Still024.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 23'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_49_22.Still025.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520298911&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_49_22.Still025.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_49_22.Still025.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520053072&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_49_22.Still025.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 24'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_51_00.Still026.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520303923&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_51_00.Still026.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_51_00.Still026.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520059244&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_51_00.Still026.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 25'\r\n },\r\n {\r\n lowResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/LowRes_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_57_08.Still027.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520309007&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_57_08.Still027.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FLowRes_Opt',\r\n highResSrc: 'https:\/\/cosasconcretas.myqnapcloud.com:14001\/share.cgi\/20230623%20SH%20-%20Asim%C3%A9trica\/Stills\/JPG_Opt\/ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_57_08.Still027.jpg?ssid=c86c9bb577874c4fb0598c956f3a132c&openfolder=normal&ep=&_dc=1726520064070&fid=c86c9bb577874c4fb0598c956f3a132c&filename=ASIM%C3%89TRICA_ProRes4444XQ_1.00_02_57_08.Still027.jpg&path=%2F20230623%20SH%20-%20Asim%C3%A9trica%2FStills%2FJPG_Opt',\r\n link: '\/asimetrica-shortfilm',\r\n alt: 'Slideshow Image 26'\r\n }\r\n ];\r\n\r\n\r\n const mosaicContainer = document.getElementById('mosaicContainer');\r\n const previewOverlay = document.getElementById('previewOverlay');\r\n const previewImage = document.getElementById('previewImage');\r\n const prevArrow = document.getElementById('prevArrow');\r\n const nextArrow = document.getElementById('nextArrow');\r\n const closeBtn = document.getElementById('closeBtn');\r\n const previewContainer = document.getElementById('previewContainer');\r\n\r\n let currentIndex = 0;\r\n\r\n \/\/ Cargar las im\u00e1genes de baja resoluci\u00f3n en el mosaico\r\n imageData.forEach((data, index) => {\r\n const mosaicItem = document.createElement('div');\r\n mosaicItem.classList.add('mosaic-item');\r\n mosaicItem.dataset.index = index;\r\n\r\n const img = document.createElement('img');\r\n img.src = data.lowResSrc;\r\n img.alt = data.alt;\r\n img.dataset.highResSrc = data.highResSrc; \/\/ Guardar la URL de alta resoluci\u00f3n\r\n\r\n mosaicItem.appendChild(img);\r\n mosaicContainer.appendChild(mosaicItem);\r\n\r\n mosaicItem.addEventListener('click', () => {\r\n currentIndex = index;\r\n showPreview(data.highResSrc);\r\n });\r\n });\r\n\r\n \/\/ Funci\u00f3n para reemplazar con la imagen de alta resoluci\u00f3n\r\n function loadHighResImages() {\r\n const images = document.querySelectorAll('.mosaic-item img');\r\n images.forEach(img => {\r\n const highResSrc = img.dataset.highResSrc;\r\n const highResImage = new Image();\r\n highResImage.src = highResSrc;\r\n highResImage.onload = () => {\r\n img.src = highResSrc;\r\n };\r\n });\r\n }\r\n\r\n \/\/ Utilizar IntersectionObserver para cargar im\u00e1genes en alta resoluci\u00f3n cuando todas est\u00e9n visibles\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n loadHighResImages();\r\n observer.disconnect(); \/\/ Desconectar el observador despu\u00e9s de cargar todas las im\u00e1genes\r\n }\r\n });\r\n });\r\n\r\n \/\/ Observar el contenedor del mosaico\r\n observer.observe(mosaicContainer);\r\n\r\n \/\/ Funci\u00f3n para mostrar la vista previa\r\n function showPreview(src) {\r\n previewImage.src = src;\r\n previewOverlay.style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n \/\/ Funci\u00f3n para ocultar la vista previa\r\n function hidePreview() {\r\n previewOverlay.style.display = 'none';\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/\/ Funci\u00f3n para manejar la navegaci\u00f3n con las flechas\r\n function handleKeydown(event) {\r\n if (event.key === 'ArrowLeft') {\r\n showPrevImage();\r\n } else if (event.key === 'ArrowRight') {\r\n showNextImage();\r\n } else if (event.key === 'Escape') {\r\n hidePreview();\r\n }\r\n }\r\n\r\n \/\/ Funci\u00f3n para mostrar la imagen anterior\r\n function showPrevImage() {\r\n currentIndex = (currentIndex - 1 + imageData.length) % imageData.length;\r\n previewImage.src = imageData[currentIndex].highResSrc;\r\n }\r\n\r\n \/\/ Funci\u00f3n para mostrar la imagen siguiente\r\n function showNextImage() {\r\n currentIndex = (currentIndex + 1) % imageData.length;\r\n previewImage.src = imageData[currentIndex].highResSrc;\r\n }\r\n\r\n \/\/ Navegar entre las im\u00e1genes con las flechas\r\n prevArrow.addEventListener('click', (event) => {\r\n event.stopPropagation();\r\n showPrevImage();\r\n });\r\n nextArrow.addEventListener('click', (event) => {\r\n event.stopPropagation();\r\n showNextImage();\r\n });\r\n\r\n \/\/ Cerrar la vista previa al hacer clic fuera del contenedor de la imagen o en el bot\u00f3n de cerrar\r\n document.addEventListener('click', (event) => {\r\n if (event.target === previewOverlay || event.target === closeBtn) {\r\n hidePreview();\r\n }\r\n });\r\n\r\n previewOverlay.addEventListener('click', (event) => {\r\n if (!previewContainer.contains(event.target)) {\r\n hidePreview();\r\n }\r\n });\r\n\r\n previewContainer.addEventListener('click', (event) => {\r\n const containerRect = previewContainer.getBoundingClientRect();\r\n const clickX = event.clientX;\r\n const containerWidth = containerRect.width;\r\n\r\n if (clickX < containerRect.left + containerWidth * 0.4) {\r\n showPrevImage();\r\n } else if (clickX > containerRect.left + containerWidth * 0.6) {\r\n showNextImage();\r\n }\r\n });\r\n\r\n previewContainer.addEventListener('mousemove', (event) => {\r\n const containerRect = previewContainer.getBoundingClientRect();\r\n const clickX = event.clientX;\r\n const containerWidth = containerRect.width;\r\n\r\n if (event.target === closeBtn) {\r\n prevArrow.classList.remove('highlight');\r\n nextArrow.classList.remove('highlight');\r\n return;\r\n }\r\n\r\n if (clickX < containerRect.left + containerWidth * 0.4) {\r\n prevArrow.classList.add('highlight');\r\n nextArrow.classList.remove('highlight');\r\n } else if (clickX > containerRect.left + containerWidth * 0.6) {\r\n nextArrow.classList.add('highlight');\r\n prevArrow.classList.remove('highlight');\r\n } else {\r\n prevArrow.classList.remove('highlight');\r\n nextArrow.classList.remove('highlight');\r\n }\r\n });\r\n\r\n previewContainer.addEventListener('mouseenter', (event) => {\r\n const containerRect = previewContainer.getBoundingClientRect();\r\n const mouseX = event.clientX;\r\n const containerWidth = containerRect.width;\r\n\r\n if (mouseX < containerRect.left + containerWidth * 0.4) {\r\n prevArrow.classList.add('highlight');\r\n } else if (mouseX > containerRect.left + containerWidth * 0.6) {\r\n nextArrow.classList.add('highlight');\r\n }\r\n });\r\n\r\n previewContainer.addEventListener('mouseleave', (event) => {\r\n prevArrow.classList.remove('highlight');\r\n nextArrow.classList.remove('highlight');\r\n });\r\n\r\n document.addEventListener('keydown', handleKeydown);\r\n\r\n let startX = 0;\r\n let endX = 0;\r\n\r\n \/\/ Detectar el inicio del toque\r\n previewContainer.addEventListener('touchstart', (event) => {\r\n startX = event.touches[0].clientX;\r\n });\r\n\r\n \/\/ Detectar el movimiento del toque\r\n previewContainer.addEventListener('touchmove', (event) => {\r\n endX = event.touches[0].clientX;\r\n });\r\n\r\n \/\/ Detectar el fin del toque y calcular la direcci\u00f3n del deslizamiento\r\n previewContainer.addEventListener('touchend', () => {\r\n const swipeThreshold = 50; \/\/ M\u00ednima distancia de deslizamiento para considerar como swipe\r\n const swipeDistance = startX - endX;\r\n\r\n if (Math.abs(swipeDistance) > swipeThreshold) {\r\n if (swipeDistance > 0) {\r\n showNextImage(); \/\/ Deslizamiento a la izquierda, mostrar la siguiente imagen\r\n } else {\r\n showPrevImage(); \/\/ Deslizamiento a la derecha, mostrar la imagen anterior\r\n }\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2c142d7 e-flex e-con-boxed e-con e-parent\" data-id=\"2c142d7\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ded3b0f elementor-widget elementor-widget-button\" data-id=\"ded3b0f\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/cesebe.es\/en\/ficcion\/asimetrica\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-far-caret-square-left\" viewbox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M272 157.1v197.8c0 10.7-13 16.1-20.5 8.5l-98.3-98.9c-4.7-4.7-4.7-12.2 0-16.9l98.3-98.9c7.5-7.7 20.5-2.3 20.5 8.4zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Volver<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Image Mosaic and Preview < × > Volver<\/p>","protected":false},"author":2,"featured_media":0,"parent":277,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-322","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cesebe.es\/en\/wp-json\/wp\/v2\/pages\/322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cesebe.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cesebe.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cesebe.es\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cesebe.es\/en\/wp-json\/wp\/v2\/comments?post=322"}],"version-history":[{"count":16,"href":"https:\/\/cesebe.es\/en\/wp-json\/wp\/v2\/pages\/322\/revisions"}],"predecessor-version":[{"id":459,"href":"https:\/\/cesebe.es\/en\/wp-json\/wp\/v2\/pages\/322\/revisions\/459"}],"up":[{"embeddable":true,"href":"https:\/\/cesebe.es\/en\/wp-json\/wp\/v2\/pages\/277"}],"wp:attachment":[{"href":"https:\/\/cesebe.es\/en\/wp-json\/wp\/v2\/media?parent=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}