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

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 65: Linha 65:
             display: block;
             display: block;
             margin: 0 auto 10px;
             margin: 0 auto 10px;
        }
        .central-image {
            margin-top: 1em;
            cursor: pointer;
            width: 200px; /* Ajuste o tamanho conforme necessário */
            height: 200px; /* Ajuste o tamanho conforme necessário */
         }
         }


Linha 77: Linha 70:
             margin-top: 10px;
             margin-top: 10px;
             cursor: pointer;
             cursor: pointer;
             width: 30px;
             text-align: center;
            height: 30px;
             background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center;
             background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center;
             background-size: contain;
             background-size: contain;
Linha 179: Linha 171:
                 <div class="image-item">
                 <div class="image-item">
                     <img src="${imageInfo.imageUrl}" alt="${imageName}">
                     <img src="${imageInfo.imageUrl}" alt="${imageName}">
                </div>
                <div class="image-item">
                    <img id="centralImage" src="${imageInfo.variations[0].additionalImages[0]}" alt="Central Image" class="central-image">
                 </div>
                 </div>
                 <div class="variations-container" id="variationsContainer">
                 <div class="variations-container" id="variationsContainer">
Linha 205: Linha 194:


             // Alternar imagens ao clicar na imagem centralizada
             // Alternar imagens ao clicar na imagem centralizada
            const centralImage = document.getElementById('centralImage');
             const variationsContainers = document.getElementById('variationsContainer');
             const variationsContainers = document.getElementById('variationsContainer');
             const swapButtons = variationsContainers.getElementsByClassName('swap-button');
             const swapButtons = variationsContainers.getElementsByClassName('swap-button');
Linha 218: Linha 206:
                         currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                         currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                         button.previousElementSibling.src = variation.additionalImages[currentImageIndex];
                         button.previousElementSibling.src = variation.additionalImages[currentImageIndex];
                        if (index === 0) { // Atualiza a imagem centralizada apenas para a primeira variação
                            centralImage.src = variation.additionalImages[currentImageIndex];
                        }
                     });
                     });
                 });
                 });
5 667

edições

Menu de navegação