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

Ir para navegação Ir para pesquisar

Widget:Test (ver código-fonte)

Edição das 17h14min de 29 de dezembro de 2024

546 bytes adicionados ,  29 de dezembro de 2024
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
 
Linha 127: Linha 127:


     imageInfo.variations.forEach((variation, index) => {
     imageInfo.variations.forEach((variation, index) => {
imagesHtml += `
        imagesHtml += `
    <div class="variation-item">
            <div class="variation-item">
        <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">
                <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">
        <div class="swap-button" data-variation-index="${index}"></div><br>
                <div class="swap-button" data-variation-index="${index}"></div><br>
        <div class="image-info">
                <div class="image-info">
             <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;">  
        `;
            <br> <b>Nome</b>: ${variation.description} <br>
 
             <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a> <br>
        // Exibe `descriptionIMG` se estiver presente
             <b>Cor Customizável</b>: ${variation.customColor} <br>
        if (variation.descriptionIMG) {
         </div>
             imagesHtml += `<img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"><br>`;
    </div>
        }
`;
 
        imagesHtml += `<b>Nome</b>: ${variation.description} <br>`;
 
        // Exibe `obtain` se estiver presente
        if (variation.obtain) {
             imagesHtml += `<b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a> <br>`;
        }
 
        // Exibe `customColor` se estiver presente
        if (variation.customColor) {
             imagesHtml += `<b>Cor Customizável</b>: ${variation.customColor} <br>`;
        }
 
         imagesHtml += `
                </div>
            </div>
        `;
     });
     });


Linha 149: Linha 165:
     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
            const variationImage = button.previousElementSibling; // Atualiza a imagem da variação


        // Aplica o efeito de saída
            // Aplica o efeito de saída
        variationImage.classList.add('fade-out');
            variationImage.classList.add('fade-out');


        // Aguarda o término da animação antes de trocar a imagem
            // Aguarda o término da animação antes de trocar a imagem
        setTimeout(() => {
            setTimeout(() => {
            currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
            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
                // Remove o efeito de saída e aplica o efeito de entrada
            variationImage.classList.remove('fade-out');
                variationImage.classList.remove('fade-out');
            variationImage.classList.add('fade-in');
                variationImage.classList.add('fade-in');


            // Remove o efeito de entrada após a transição
                // Remove o efeito de entrada após a transição
            setTimeout(() => {
                setTimeout(() => {
                variationImage.classList.remove('fade-in');
                    variationImage.classList.remove('fade-in');
            }, 300); // Duração da animação CSS (0.3s)
                }, 300); // Duração da animação CSS (0.3s)
        }, 300); // Sincroniza com a duração do efeito de saída
            }, 300); // Sincroniza com a duração do efeito de saída
        });
     });
     });
});
}
}


Renee
Administradores
6 385

edições

Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/94599”

Menu de navegação