Widget:Test: mudanças entre as edições

Ir para navegação Ir para pesquisar
616 bytes adicionados ,  29 de dezembro de 2024
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 149: Linha 149:
     const swapButtons = document.querySelectorAll('.swap-button');
     const swapButtons = document.querySelectorAll('.swap-button');


    swapButtons.forEach(button => {
  swapButtons.forEach(button => {
        const index = button.getAttribute('data-variation-index');
    const index = button.getAttribute('data-variation-index');
        const variation = imageInfo.variations[index];
    const variation = imageInfo.variations[index];
        let currentImageIndex = 0;
    let currentImageIndex = 0;


        button.addEventListener('click', () => {
    button.addEventListener('click', () => {
        const variationImage = button.previousElementSibling; // Obtém a imagem da variação
 
        // Aplica o efeito de saída
        variationImage.classList.add('fade-out');
 
        // Aguarda o término da animação antes de trocar a imagem
        setTimeout(() => {
             currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
             currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
            const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
             variationImage.src = variation.additionalImages[currentImageIndex].url;
             variationImage.src = variation.additionalImages[currentImageIndex].url;
             variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
             variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
         });
 
            // Remove o efeito de saída e aplica o efeito de entrada
            variationImage.classList.remove('fade-out');
            variationImage.classList.add('fade-in');
 
            // Remove o efeito de entrada após a transição
            setTimeout(() => {
                variationImage.classList.remove('fade-in');
            }, 300); // Duração da animação CSS (0.3s)
         }, 300); // Sincroniza com a duração do efeito de saída
     });
     });
});
}
}


6 385

edições

Menu de navegação