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

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(107 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 4: Linha 4:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Seleção e Exibição de Imagens</title>
     <title>Busca de Imagens por Nome</title>
     <style>
     <style>
.d-flex {
        .input-group { margin-bottom: 1em; position: relative; }
    display: flex;
         .dropdown {
    justify-content: center;
            border: 1px solid #ccc;
    align-items: center;
    flex-direction: column;
    margin-top: -15px; /* Ajuste este valor conforme necessário para subir o botão */
}
 
         .hidden {
             display: none;
             display: none;
            position: absolute;
            background-color: #fff;
            z-index: 1000;
            max-height: 150px;
            overflow-y: auto;
            width: 100%;
        }
        .dropdown-item {
            padding: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .dropdown-item img {
            margin-right: 10px;
        }
        .dropdown-item:hover {
            background-color: #f0f0f0;
         }
         }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
             flex-wrap: wrap;
             flex-direction: column;
            align-items: center;
             justify-content: center;
             justify-content: center;
            gap: 10px;
            margin-top: 5px;
         }
         }
         .image-container .image-item {
         .image-item {  
             flex: 1 0 30%;
             margin-bottom: 1em;  
             text-align: center;
             text-align: center;
         }
         }
         .image-container img {
         .image-item img {
             width: 320px;  
             display: block;
             margin-bottom: 5px;
             margin: 0 auto;
         }
         }
         .image-info {
 
             margin-top: 5px;
         .variations-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
             margin-top: 1em;
         }
         }
         select, input[type="text"], button {
 
         .variation-item {
            width: 35%;
            box-sizing: border-box;
             margin: 5px;
             margin: 5px;
            text-align: center;
            border: 1px solid ;
            padding: 10px;
         }
         }
         #filterButton, #searchButton {
 
            background: none; /* Remove o fundo do botão */
         .variation-item img {
            border: none; /* Remove a borda do botão */
             display: block;
            padding: 0; /* Remove o padding do botão */
             margin: 0 auto 10px;
            cursor: pointer; /* Mostra o cursor de ponteiro ao passar sobre o botão */
            margin-top: 5px; /* Ajuste a margem superior para subir o botão */
        }
        #filterButton img, #searchButton img {
             border-radius: 12px;
             width: auto; /* Garante que a largura se ajuste ao tamanho original da imagem */
            height: auto; /* Garante que a altura se ajuste ao tamanho original da imagem */
        }
        .mw-body-content {
          display: flex;
         }
         }
        .mw-parser-output {
          display: inline-block;
          padding: .5rem 2rem;
          margin: 0 auto;
          border: 30px solid transparent;
          border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
        }
.input-group {
    position: relative;
    margin: 20px 0; /* Ajuste a margem para mover o campo para cima */
}


.input-group label {
        .swap-button {  
    position: absolute;
            margin-top: 10px;
    top: -18px; /* Eleva o texto para cima */
            cursor: pointer;
    background: none;
            width: 15px;
    padding: 0 5px;
            height: 15px;
    font-size: 14px;
            background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
    font-weight: bold;
             background-size: contain;
    color: #0d0d0d;
             display: block;
}
             margin: 0 auto;
.maps__select {
    width: 100%; /* Mantém a largura total disponível */
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    background-color: #fff; /* Adiciona um fundo branco */
    box-sizing: border-box; /* Inclui o padding e a borda na largura total */
}
 
.input-group input[type="text"] {
    width: 100%; /* Mantém a largura total disponível */
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Inclui o padding e a borda na largura total */
}
        .maps__label {
            position: absolute;
            top: -18px; /* Eleva o texto um pouco mais para cima */
             background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold; /* Deixa o texto em negrito */
            color: #0d0d0d;
        }
        .hover-minimize:hover {
             transform: scale(0.95); /* Adiciona um efeito de minimizar ao passar o mouse */
             transition: transform 0.2s ease-in-out;
         }
         }
.filter-container {
    display: flex;
    align-items: flex-start;
}
.filter-container input[type="checkbox"] {
    margin: 0;
    padding: 0;
    width: auto; /* Ajusta o tamanho da checkbox conforme necessário */
    height: auto; /* Ajusta o tamanho da checkbox conforme necessário */
    /* Alinha verticalmente a checkbox com o texto */
    vertical-align: middle;
}
.filter-label {
    margin-left: 10px; /* Espaço entre a checkbox e o texto */
    font-size: 14px;
    font-weight: bold;
    color: #0d0d0d;
    line-height: 1.5; /* Ajusta a altura da linha para um alinhamento adequado */
}
     </style>
     </style>
</head>
</head>
<body>
<body>
     <form id="mapForm">
     <form id="imageForm">
         <div id="mapTypeSelection" class="input-group">
         <div class="input-group">
             <select id="mapType" class="maps__select">
             <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
                <option value="">Selecione um mapa</option>
             <div id="dropdown" class="dropdown"></div>
                <option value="1">Mapa Vermelho</option>
                <option value="2">Mapa Verde</option>
                <option value="3">Mapa Roxo</option>
            </select>
             <label class="maps__label" for="mapType">Tipo de Mapa</label>
        </div>
 
        <div id="specificOptions" class="hidden input-group">
            <select id="specificOption" class="maps__select">
                <option value="">Selecione uma opção</option>
                <option value="Areia">Areia</option>
                <option value="Gelo">Gelo</option>
                <option value="Grama">Grama</option>
                <option value="Pedra">Pedra</option>
                <option value="Subaquático">Subaquático</option>
                <option value="Terra">Terra</option>
                <option value="Pisos">Pisos</option>
            </select>
            <label class="maps__label" for="specificOption">Local do X</label>
         </div>
         </div>
<div class="filter-container">
    <input type="checkbox" id="enableFilter">
    <label for="enableFilter" class="filter-label">Ativar filtro:</label>
</div>
        <div id="filterSection" class="hidden">
            <div id="filterById" class="input-group">
                <label for="searchIds" class="mapsCalc__label">Buscar por ID(s):</label>
                <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula" class="mapsCalc__select">
            </div>


            <div class="d-flex justify-center align-center flex-column">
                <button type="button" id="filterButton" class="hover-minimize">
                    <img src="https://wiki.pokexgames.com/images/d/d3/Banner_calculadora.png" alt="Imagem botão filtrar">
                </button>
            </div>
        </div>
         <div id="imageContainer" class="image-container hidden">
         <div id="imageContainer" class="image-container hidden">
             <!-- As imagens e suas informações serão exibidas aqui -->
             <!-- As imagens e suas informações serão exibidas aqui -->
Linha 180: Linha 90:


     <script>
     <script>
         const specificOptions = {
         const imageList = {
             1: { // Mapa Vermelho
             'Squirtle': {  
                 'Areia': [
                imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.png',
                     { id: '1001', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                 variations: [
                    { id: '1002', local: 'Wildwind Island', coordinates: '3969, 3300, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     {  
                    { id: '1003', local: 'Wildwind Island', coordinates: '4002, 3320, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                        description: 'Squirtle Purple Ninja Pack',
                     { id: '1004', local: 'Hurricane Island', coordinates: '4166, 3302, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                    { id: '1005', local: 'Shell Island', coordinates: '4266, 3359, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                        obtain: {
                    { id: '1006', local: 'Shell Island', coordinates: '4299, 3333, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                ],
                            text: 'Estilista'
                 // Outras opções do Mapa Vermelho
                        },
                        additionalImages: [
                            { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png'}, // Frente
                            { url: 'https://wiki.pokexgames.com/images/5/50/Squirtle_Purple_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                            { url: 'https://wiki.pokexgames.com/images/a/af/Squirtle_Purple_Ninja_Pack_Direita.png'}, // Costas
                            { url: 'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png'}  // Lado Direito
                        ]
                    },
                     {
                        description: 'Squirtle Red Ninja Pack',
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                        obtain: {
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                            text: 'Estilista'
                        },
                        additionalImages: [
                            { url: 'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png'}, // Frente
                            { url: 'https://wiki.pokexgames.com/images/1/1e/Squirtle_Red_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                            { url: 'https://wiki.pokexgames.com/images/0/01/Squirtle_Red_Ninja_Pack_Costas.png'}, // Costas
                            { url: 'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png'} // Lado Direito
                        ]
                    }
                 ]
             },
             },
            2: { // Mapa Verde
                // Adicionar dados para o Mapa Verde aqui
            },
            3: { // Mapa Roxo
                // Adicionar dados para o Mapa Roxo aqui
            }
         };
         };
       
document.getElementById('enableFilter').addEventListener('change', function() {
    const filterSection = document.getElementById('filterSection');
    if (this.checked) {
        filterSection.classList.remove('hidden');
    } else {
        filterSection.classList.add('hidden');
    }
});


        const imageSearch = document.getElementById('imageSearch');
        const dropdown = document.getElementById('dropdown');
        const imageContainer = document.getElementById('imageContainer');


         document.getElementById('searchIds').addEventListener('keypress', function(event) {
         imageSearch.addEventListener('input', function() {
             if (event.key === 'Enter') {
             const searchValue = this.value.trim().toLowerCase();
                event.preventDefault();
             dropdown.innerHTML = '';
                document.getElementById('filterButton').click();
             }
        });
        document.getElementById('mapType').addEventListener('change', function() {
            const selectedMapType = this.value;
            const specificOptionSelect = document.getElementById('specificOption');


             if (selectedMapType) {
             if (searchValue) {
                 specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
                 Object.keys(imageList).forEach(imageName => {
                const options = Object.keys(specificOptions[selectedMapType]);
                    if (imageName.toLowerCase().includes(searchValue)) {
                options.forEach(option => {
                        const dropdownItem = document.createElement('div');
                    specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`;
                        dropdownItem.classList.add('dropdown-item');
                       
                        const imgElement = document.createElement('img');
                        imgElement.src = imageList[imageName].imageUrl;
                        imgElement.alt = imageName;
                       
                        dropdownItem.appendChild(imgElement);
                        dropdownItem.appendChild(document.createTextNode(imageName));
                       
                        dropdownItem.addEventListener('click', function() {
                            showImageInfo(imageName);
                            dropdown.style.display = 'none';
                        });
                        dropdown.appendChild(dropdownItem);
                    }
                 });
                 });
                 document.getElementById('specificOptions').classList.remove('hidden');
 
                 dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
             } else {
             } else {
                 document.getElementById('specificOptions').classList.add('hidden');
                 dropdown.style.display = 'none';
             }
             }
         });
         });


         document.getElementById('specificOption').addEventListener('change', function() {
         document.addEventListener('click', function(event) {
             const selectedMapType = document.getElementById('mapType').value;
             if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
            const selectedOption = this.value;
                 dropdown.style.display = 'none';
            const imageContainer = document.getElementById('imageContainer');
           
            if (selectedMapType && selectedOption) {
                const images = specificOptions[selectedMapType][selectedOption];
                let imagesHtml = '';
 
                if (Array.isArray(images)) {
                    images.forEach(image => {
                        imagesHtml += `
                            <div class="image-item">
                                <img src="${image.imageUrl}" alt="${selectedOption}">
                                <div class="image-info">
                                    ID: ${image.id} <br>
                                    Local: ${image.local} <br>
                                    Coordenada: ${image.coordinates}
                                </div>
                            </div>
                        `;
                    });
                 } else {
                    imagesHtml = `
                        <div class="image-item">
                            <img src="${images.imageUrl}" alt="${selectedOption}">
                            <div class="image-info">
                                ID: ${images.id} <br>
                                Local: ${images.local} <br>
                                Coordenada: ${images.coordinates}
                            </div>
                        </div>
                    `;
                }
                imageContainer.innerHTML = imagesHtml;
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
             }
             }
         });
         });


        document.getElementById('filterButton').addEventListener('click', function() {
function showImageInfo(imageName) {
            const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
    const imageInfo = imageList[imageName];
             const imageContainer = document.getElementById('imageContainer');
    let imagesHtml = `
        <div class="image-item">
             <img src="${imageInfo.imageUrl}" alt="${imageName}">
        </div>
        <div class="variations-container">
    `;


             if (searchIds.length > 0) {
    imageInfo.variations.forEach((variation, index) => {
                 let imagesHtml = '';
        imagesHtml += `
                 let allImages = [];
             <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;">
                <div class="swap-button" data-variation-index="${index}"></div><br>
                 <div class="image-info">
                    <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"> <!-- Exibe a imagem antes da descrição -->
                    <br> ${variation.description} <br> <!-- Descrição após a imagem -->
                    <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                 </div>
            </div>
        `;
    });


                // Recolhe todas as imagens que correspondem aos IDs
    imagesHtml += '</div>';
                Object.keys(specificOptions).forEach(mapType => {
 
                    const mapOptions = specificOptions[mapType];
    imageContainer.innerHTML = imagesHtml;
                    Object.keys(mapOptions).forEach(option => {
    imageContainer.classList.remove('hidden');
                        const images = mapOptions[option].filter(image => searchIds.includes(image.id));
                        allImages = allImages.concat(images);
                    });
                });


                // Ordena as imagens pelo nome do local
    // Alternar imagens ao clicar no botão de troca
                allImages.sort((a, b) => a.local.localeCompare(b.local));
    const swapButtons = document.querySelectorAll('.swap-button');


                // Gera o HTML para exibir as imagens ordenadas
    swapButtons.forEach(button => {
                allImages.forEach(image => {
        const index = button.getAttribute('data-variation-index');
                    imagesHtml += `
        const variation = imageInfo.variations[index];
                        <div class="image-item">
        let currentImageIndex = 0;
                            <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">
                            <div class="image-info">
                                ID: ${image.id} <br>
                                Local: ${image.local} <br>
                                Coordenada: ${image.coordinates}
                            </div>
                        </div>
                    `;
                });


                imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os IDs fornecidos.';
        button.addEventListener('click', () => {
                imageContainer.classList.remove('hidden');
            currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
             } else {
             const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
                imageContainer.classList.add('hidden');
            variationImage.src = variation.additionalImages[currentImageIndex].url;
             }
             variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
         });
         });
    });
}
     </script>
     </script>
</body>
</body>
</html>
</html>

Edição atual tal como às 23h45min de 16 de outubro de 2024

<!DOCTYPE html> <html lang="pt-BR"> <head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Busca de Imagens por Nome</title>
   <style>
       .input-group { margin-bottom: 1em; position: relative; }
       .dropdown {
           border: 1px solid #ccc;
           display: none;
           position: absolute;
           background-color: #fff;
           z-index: 1000;
           max-height: 150px;
           overflow-y: auto;
           width: 100%;
       }
       .dropdown-item {
           padding: 8px;
           cursor: pointer;
           display: flex;
           align-items: center;
       }
       .dropdown-item img {
           margin-right: 10px;
       }
       .dropdown-item:hover {
           background-color: #f0f0f0;
       }
       .image-container {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
       }
       .image-item { 
           margin-bottom: 1em; 
           text-align: center;
       }
       .image-item img {
           display: block;
           margin: 0 auto;
       }

       .variations-container {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           margin-top: 1em;
       }

       .variation-item {
           width: 35%;
           box-sizing: border-box;
           margin: 5px;
           text-align: center;
           border: 1px solid ;
           padding: 10px;
       }

       .variation-item img {
           display: block;
           margin: 0 auto 10px;
       }

       .swap-button { 
           margin-top: 10px;
           cursor: pointer;
           width: 15px;
           height: 15px;
           background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
           background-size: contain;
           display: block;
           margin: 0 auto;
       }
   </style>

</head> <body> 

   <form id="imageForm">

           <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">

   </form>

   <script>
       const imageList = {
           'Squirtle': { 
               imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.png', 
               variations: [
                   { 
                       description: 'Squirtle Purple Ninja Pack',
                       descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png'}, // Frente
                           { url: 'https://wiki.pokexgames.com/images/5/50/Squirtle_Purple_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                           { url: 'https://wiki.pokexgames.com/images/a/af/Squirtle_Purple_Ninja_Pack_Direita.png'}, // Costas
                           { url: 'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png'}  // Lado Direito
                       ]
                   },
                   {  
                       description: 'Squirtle Red Ninja Pack',
                       descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           { url: 'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png'}, // Frente
                           { url: 'https://wiki.pokexgames.com/images/1/1e/Squirtle_Red_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                           { url: 'https://wiki.pokexgames.com/images/0/01/Squirtle_Red_Ninja_Pack_Costas.png'}, // Costas
                           { url: 'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png'}  // Lado Direito
                       ]
                   }
               ]
           },
       };

       const imageSearch = document.getElementById('imageSearch');
       const dropdown = document.getElementById('dropdown');
       const imageContainer = document.getElementById('imageContainer');

       imageSearch.addEventListener('input', function() {
           const searchValue = this.value.trim().toLowerCase();
           dropdown.innerHTML = ;

           if (searchValue) {
               Object.keys(imageList).forEach(imageName => {
                   if (imageName.toLowerCase().includes(searchValue)) {
                       const dropdownItem = document.createElement('div');
                       dropdownItem.classList.add('dropdown-item');
                       
                       const imgElement = document.createElement('img');
                       imgElement.src = imageList[imageName].imageUrl;
                       imgElement.alt = imageName;
                       
                       dropdownItem.appendChild(imgElement);
                       dropdownItem.appendChild(document.createTextNode(imageName));
                       
                       dropdownItem.addEventListener('click', function() {
                           showImageInfo(imageName);
                           dropdown.style.display = 'none';
                       });
                       dropdown.appendChild(dropdownItem);
                   }
               });

               dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
           } else {
               dropdown.style.display = 'none';
           }
       });

       document.addEventListener('click', function(event) {
           if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
               dropdown.style.display = 'none';
           }
       });

function showImageInfo(imageName) { 

   const imageInfo = imageList[imageName];
   let imagesHtml = `

           <img src="${imageInfo.imageUrl}" alt="${imageName}">

   `;

   imageInfo.variations.forEach((variation, index) => {
       imagesHtml += `

                <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.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"> 
                   
 ${variation.description} 
 
                   Como Obter: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>

       `;
   });
imagesHtml += '

'; 

   imageContainer.innerHTML = imagesHtml;
   imageContainer.classList.remove('hidden');

   // Alternar imagens ao clicar no botão de troca
   const swapButtons = document.querySelectorAll('.swap-button');

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

       button.addEventListener('click', () => {
           currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
           const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
           variationImage.src = variation.additionalImages[currentImageIndex].url;
           variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
       });
   });

} 

   </script>

</body> </html>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Test&oldid=87873”