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

sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 72: Linha 72:
             width: 200px; /* Ajuste o tamanho conforme necessário */
             width: 200px; /* Ajuste o tamanho conforme necessário */
             height: 200px; /* Ajuste o tamanho conforme necessário */
             height: 200px; /* Ajuste o tamanho conforme necessário */
        }
        .swap-button {
            margin-top: 10px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center;
            background-size: contain;
         }
         }
     </style>
     </style>
Linha 101: Linha 110:
                         additionalImages: [
                         additionalImages: [
                             'https://example.com/front1.png',  // Frente
                             'https://example.com/front1.png',  // Frente
                             'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',  // Lado Esquerdo
                             'https://example.com/left1.png',  // Lado Esquerdo
                             'https://example.com/back1.png',  // Costas
                             'https://example.com/back1.png',  // Costas
                             'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png'  // Lado Direito
                             'https://example.com/right1.png'  // Lado Direito
                         ]
                         ]
                     },
                     },
Linha 177: Linha 186:
             `;
             `;


             imageInfo.variations.forEach(variation => {
             imageInfo.variations.forEach((variation, index) => {
                 imagesHtml += `
                 imagesHtml += `
                     <div class="variation-item">
                     <div class="variation-item">
Linha 185: Linha 194:
                             <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                             <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                         </div>
                         </div>
                        <div class="swap-button" data-index="${index}"></div>
                     </div>
                     </div>
                 `;
                 `;
Linha 195: Linha 205:


             // Alternar imagens ao clicar na imagem centralizada
             // Alternar imagens ao clicar na imagem centralizada
            let currentImageIndex = 0;
             const centralImage = document.getElementById('centralImage');
             const centralImage = document.getElementById('centralImage');
             const variationsContainer = document.getElementById('variationsContainer');
             const variationsContainers = document.getElementById('variationsContainer');
             const variationImages = variationsContainer.getElementsByClassName('variation-image');
             const swapButtons = variationsContainers.getElementsByClassName('swap-button');
              
 
            centralImage.addEventListener('click', () => {
             Array.from(swapButtons).forEach(button => {
                currentImageIndex = (currentImageIndex + 1) % imageInfo.variations[0].additionalImages.length;
                button.addEventListener('click', () => {
                const currentVariationImages = Array.from(variationImages);
                    const index = button.getAttribute('data-index');
                currentVariationImages.forEach((img, index) => {
                    const variation = imageInfo.variations[index];
                    img.src = imageInfo.variations[index].additionalImages[currentImageIndex];
                    let currentImageIndex = 0;
 
                    button.addEventListener('click', () => {
                        currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                        button.previousElementSibling.src = variation.additionalImages[currentImageIndex];
                        if (index === 0) { // Atualiza a imagem centralizada apenas para a primeira variação
                            centralImage.src = variation.additionalImages[currentImageIndex];
                        }
                    });
                 });
                 });
                centralImage.src = imageInfo.variations[0].additionalImages[currentImageIndex];
             });
             });
         }
         }
5 801

edições