/* ESTILOS CSS */ /* Contenedor relativo para que las imágenes se apilen */ .columna-imagenes { position: relative; min-height: 400px; /* Ajusta esto a la altura de tus imágenes */ } /* Estilo base para todas las imágenes: Absolutas y transparentes */ .imagen-cambiante { position: absolute !important; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.4s ease-in-out; /* Transición suave */ z-index: 1; } /* La imagen activa será visible */ .imagen-cambiante.activa { opacity: 1; z-index: 2; } /* Modificación del estilo para el botón activo */ .boton-trigger.activo .elementor-button { background-color: #F5F2F0; /* Establece el fondo al color blanco/crema */ color: #000; /* O el color de texto que prefieras para que sea legible */ } jQuery(document).ready(function($) { // 1. Configuración Inicial // Seleccionamos la primera imagen (.img-1) var $primeraImg = $('.img-1'); if ($primeraImg.length) { // Si la clase se aplica a un contenedor Elementor, buscamos la etiqueta de su interior var $imgTag = $primeraImg.is('img') ? $primeraImg : $primeraImg.find('img'); // Forzamos el lazy load y eliminamos cualquier rastro de fetch priority $imgTag.attr('loading', 'lazy'); $imgTag.removeAttr('fetchpriority'); console.log("ENTRA"); } // Mostramos la primera imagen al cargar la página $primeraImg.addClass('activa'); $('.btn-1').addClass('activo'); // 2. La función de Hover $('.boton-trigger').hover(function() { // A. Identificar qué número de botón es (1, 2 o 3) // Buscamos la clase que empieza por 'btn-' var clases = $(this).attr('class').split(' '); var targetClass = ''; $.each(clases, function(index, item) { if (item.match(/^btn-\d+$/)) { // Busca btn-1, btn-2, etc. targetClass = item.replace('btn-', 'img-'); } }); // B. Si encontramos la pareja... if (targetClass) { // Quitamos la clase activa de todas las imágenes y botones $('.imagen-cambiante').removeClass('activa'); $('.boton-trigger').removeClass('activo'); // Añadimos la clase activa a la imagen correspondiente y al botón actual $('.' + targetClass).addClass('activa'); $(this).addClass('activo'); } }); });