var mobileIcon = document.getElementById("mobile-menu-icon"); if (mobileIcon) { mobileIcon.addEventListener("click", function() { let c = document.getElementById("nav-links-mobile").classList; c.toggle("hidden"); }) } function setupFormSubmission(formElementId) { var form = document.getElementById(formElementId); if (!form) { return; } form.addEventListener('submit', function(e) { e.preventDefault(); var submitButton; var formElements = e.target.elements; var formData = {}; for (var i = 0; i < formElements.length; i++) { if (formElements[i].type === "submit") { submitButton = formElements[i]; } else { formData[formElements[i].name] = formElements[i].value; } } if (!submitButton) { console.error('No submit button found.'); return; } var submitButtonText = submitButton.innerText; formData.analyticsId = window.LANDING_SITE_ID; submitButton.innerText = 'Sending...'; fetch(window.LANDING_SITE_CONTACT_US_URL, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(formData), }) .then(function(response) { console.log(response); if (response.ok) { submitButton.innerText = 'Done!'; for (var i = 0; i < formElements.length; i++) { if (formElements[i].type !== "submit") { formElements[i].value = ''; } } } else { submitButton.innerText = 'Error. Please try again.'; } }) .catch((error) => { console.error('Error:', error); }) .finally(function() { setTimeout(function() { submitButton.innerText = submitButtonText; }, 4000); }) }); } setupFormSubmission('contact-us-form');
// Lightbox Profesional para Álbum Fotográfico
document.addEventListener('DOMContentLoaded', function() {
// Crear modal lightbox con diseño profesional
var albumLightboxModal = document.createElement('div');
albumLightboxModal.id = 'album-lightbox-modal';
albumLightboxModal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: none; justify-content: center; align-items: center; z-index: 9999; padding: 20px; box-sizing: border-box; backdrop-filter: blur(5px);';
var modalContent = document.createElement('div');
modalContent.style.cssText = 'position: relative; max-width: 90%; max-height: 90%; text-align: center; background: rgba(255,255,255,0.1); border-radius: 15px; padding: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.5);';
var closeButton = document.createElement('button');
closeButton.innerHTML = '×';
closeButton.style.cssText = 'position: absolute; top: -50px; right: -10px; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; color: white; font-size: 24px; width: 45px; height: 45px; cursor: pointer; z-index: 10000; transition: all 0.3s ease; backdrop-filter: blur(10px);';
closeButton.addEventListener('mouseenter', function() {
this.style.background = 'rgba(255,255,255,0.3)';
this.style.transform = 'scale(1.1)';
});
closeButton.addEventListener('mouseleave', function() {
this.style.background = 'rgba(255,255,255,0.2)';
this.style.transform = 'scale(1)';
});
var albumLightboxImage = document.createElement('img');
albumLightboxImage.id = 'album-lightbox-image';
albumLightboxImage.style.cssText = 'max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 15px 35px rgba(0,0,0,0.7); transition: all 0.4s ease; opacity: 0; transform: scale(0.8);';
var imageInfo = document.createElement('div');
imageInfo.id = 'album-image-info';
imageInfo.style.cssText = 'position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); color: white; background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 25px; font-size: 14px; white-space: nowrap; backdrop-filter: blur(10px);';
modalContent.appendChild(closeButton);
modalContent.appendChild(albumLightboxImage);
modalContent.appendChild(imageInfo);
albumLightboxModal.appendChild(modalContent);
document.body.appendChild(albumLightboxModal);
// Función para abrir lightbox con animación elegante
function openAlbumLightbox(imageSrc, imageAlt, imageIndex, totalImages) {
albumLightboxImage.src = imageSrc;
albumLightboxImage.alt = imageAlt || '';
imageInfo.textContent = imageAlt + ' (' + (imageIndex + 1) + ' de ' + totalImages + ')';
albumLightboxModal.style.display = 'flex';
document.body.style.overflow = 'hidden';
// Animación de entrada
setTimeout(function() {
albumLightboxImage.style.opacity = '1';
albumLightboxImage.style.transform = 'scale(1)';
}, 100);
}
// Función para cerrar lightbox con animación
function closeAlbumLightbox() {
albumLightboxImage.style.opacity = '0';
albumLightboxImage.style.transform = 'scale(0.8)';
setTimeout(function() {
albumLightboxModal.style.display = 'none';
document.body.style.overflow = 'auto';
}, 400);
}
// Event listeners para cerrar
closeButton.addEventListener('click', closeAlbumLightbox);
albumLightboxModal.addEventListener('click', function(e) {
if (e.target === albumLightboxModal) {
closeAlbumLightbox();
}
});
// Cerrar con tecla Escape
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && albumLightboxModal.style.display === 'flex') {
closeAlbumLightbox();
}
});
// Aplicar lightbox a todas las imágenes del álbum
setTimeout(function() {
var albumImages = document.querySelectorAll('#stpvgho .photo-thumbnail img');
albumImages.forEach(function(img, index) {
// Mejorar efectos hover
img.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
img.style.cursor = 'pointer';
img.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.08)';
this.style.boxShadow = '0 20px 40px rgba(0,0,0,0.3)';
this.style.filter = 'brightness(1.1)';
});
img.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.1)';
this.style.filter = 'brightness(1)';
});
// Reemplazar comportamiento del enlace padre
var parentLink = img.closest('a[target="_blank"]');
if (parentLink) {
parentLink.addEventListener('click', function(e) {
e.preventDefault();
var imageSrc = this.getAttribute('href') || img.src;
openAlbumLightbox(imageSrc, img.alt, index, albumImages.length);
});
parentLink.style.cursor = 'pointer';
} else {
// Si no hay enlace padre, usar la imagen directamente
img.addEventListener('click', function() {
openAlbumLightbox(this.src, this.alt, index, albumImages.length);
});
}
});
console.log('Lightbox profesional aplicado a', albumImages.length, 'imágenes en álbum fotográfico');
}, 600);
});