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
 
(228 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<script>
<!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;
        }


const optionsImageTestz = [
        .variations-container {
    {
            display: flex;
        label: "<table class="wikitable sortable" style="width: 21%;">
            flex-wrap: wrap;
  <tr>
            justify-content: center;
    <th colspan="3">Velocidades no PokéView</th>
            margin-top: 1em;
  </tr>
        }
  <tr>
 
    <th colspan="2" class="unsortable">Pokémon</th>
        .variation-item {
    <th>Velocidade</th>
            width: 35%;
  </tr>
            box-sizing: border-box;
    <tr>
            margin: 5px;
    <td style="width: 1%;" align="center"> [[Arquivo:750-Mudsdale.png|link=Mudsdale]]</td>
            text-align: center;
    <td style="width: 11%;" align="center">'''[[Mudsdale]]'''</td>
            border: 1px solid ;
    <td style="width: 1%;" align="center">220</td>
            padding: 10px;
  </tr>
        }
    <tr>
 
    <td style="width: 1%;" align="center"> [[Arquivo:095-BigOnix.png|link=Big_Onix]]</td>
        .variation-item img {
    <td style="width: 11%;" align="center">'''[[Big Onix]]'''</td>
            display: block;
     <td style="width: 1%;" align="center">220</td>
            margin: 0 auto 10px;
  </tr>
        }
  <tr>
 
    <td style="width: 1%;" align="center"> [[Arquivo:706-Goodra.png|link=Goodra]]</td>
        .swap-button {
    <td style="width: 11%;" align="center">'''[[Goodra]]'''</td>
            margin-top: 10px;
    <td style="width: 1%;" align="center">220</td>
            cursor: pointer;
  </tr>
            width: 15px;
  <tr>
            height: 15px;
     <td style="width: 1%;" align="center"> [[Arquivo:164-Sh Noctowl.png|link=Shiny Noctowl]]</td>
            background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
    <td style="width: 11%;" align="center">'''[[Shiny Noctowl]]'''</td>
            background-size: contain;
    <td style="width: 1%;" align="center">300</td>
            display: block;
  </tr>
            margin: 0 auto;
  <tr>
        }
    <td style="width: 1%;" align="center"> [[Arquivo:S.klinklang.png|link=Shiny_Klinklang]]</td>
    </style>
    <td style="width: 11%;" align="center">'''[[Shiny Klinklang]]'''</td>
</head>
    <td style="width: 1%;" align="center">300</td>
<body>
  </tr>
     <form id="imageForm">
  <tr>
        <div class="input-group">
    <td style="width: 1%;" align="center"> [[Arquivo:470-Leafeon.png|link=Leafeon]]</td>
            <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
    <td style="width: 11%;" align="center">'''[[Leafeon]]'''</td>
            <div id="dropdown" class="dropdown"></div>
    <td style="width: 1%;" align="center">220</td>
        </div>
  </tr>
 
  <tr>
        <div id="imageContainer" class="image-container hidden">
    <td style="width: 1%;" align="center"> [[Arquivo:181-Ampharos.png|link=Ampharos]]</td>
            <!-- As imagens e suas informações serão exibidas aqui -->
    <td style="width: 11%;" align="center">'''[[Ampharos]]'''</td>
        </div>
    <td style="width: 1%;" align="center">220</td>
    </form>
  </tr>
 
  <tr>
     <script>
    <td style="width: 1%;" align="center"> [[Arquivo:0009-Blastoise.png|link=Blastoise]]</td>
        const imageList = {
    <td style="width: 11%;" align="center">'''[[Blastoise]]'''</td>
            'Squirtle': {
    <td style="width: 1%;" align="center">220</td>
                imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.png',
  </tr>
                variations: [
  <tr>
                    {
    <td style="width: 1%;" align="center">  [[Arquivo:Shiny_Weezing.png|link=Shiny_Weezing]]</td>
                        description: 'Squirtle Purple Ninja Pack',
    <td style="width: 11%;" align="center">'''[[Shiny Weezing]]'''</td>
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
    <td style="width: 1%;" align="center">220</td>
                        obtain: {
  </tr>
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
  <tr>
                            text: 'Estilista'
    <td style="width: 1%;" align="center"> [[Arquivo:356-Dusclops.png|link=Dusclops]]</td>
                        },
    <td style="width: 11%;" align="center">'''[[Dusclops]]'''</td>
                        additionalImages: [
    <td style="width: 1%;" align="center">200</td>
                            { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png'}, // Frente
  </tr>
                            { url: 'https://wiki.pokexgames.com/images/5/50/Squirtle_Purple_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
  <tr>
                            { url: 'https://wiki.pokexgames.com/images/a/af/Squirtle_Purple_Ninja_Pack_Direita.png'}, // Costas
    <td style="width: 1%;" align="center"> [[Arquivo:538-Throh.png|link=Throh]]</td>
                            { url: 'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png'}  // Lado Direito
    <td style="width: 11%;" align="center">'''[[Throh]]'''</td>
                        ]
    <td style="width: 1%;" align="center">220</td>
                    },
  </tr>
                    { 
  <tr>
                        description: 'Squirtle Red Ninja Pack',
    <td style="width: 1%;" align="center"> [[Arquivo:053-AlolanPersian.png|link=Alolan_Persian]]</td>
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
    <td style="width: 11%;" align="center">'''[[Alolan Persian]]'''</td>
                        obtain: {
    <td style="width: 1%;" align="center">300</td>
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
  </tr>
                            text: 'Estilista'
  <tr>
                        },
    <td style="width: 1%;" align="center"> [[Arquivo:036-Clefable.png|link=Clefable]]</td>
                        additionalImages: [
    <td style="width: 11%;" align="center">'''[[Clefable]]'''</td>
                            { url: 'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png'}, // Frente
    <td style="width: 1%;" align="center">220</td>
                            { url: 'https://wiki.pokexgames.com/images/1/1e/Squirtle_Red_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
  </tr>
                            { url: 'https://wiki.pokexgames.com/images/0/01/Squirtle_Red_Ninja_Pack_Costas.png'}, // Costas
  <tr>
                            { url: 'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png'}  // Lado Direito
    <td style="width: 1%;" align="center"> [[Arquivo:213-Sh_Shuckle.png|link=Shiny Shuckle]]</td>
                        ]
    <td style="width: 11%;" align="center">'''[[Shiny Shuckle]]'''</td>
                    }
    <td style="width: 1%;" align="center">220</td>
                ]
  </tr>
            },
    <tr>
        };
    <td style="width: 1%;" align="center"> [[Arquivo:668-Pyroar_Female.png|link=Pyroar Female]]</td>
 
    <td style="width: 11%;" align="center">'''[[Pyroar Female]]'''</td>
        const imageSearch = document.getElementById('imageSearch');
     <td style="width: 1%;" align="center">300</td>
        const dropdown = document.getElementById('dropdown');
  </tr>
        const imageContainer = document.getElementById('imageContainer');
     <tr>
 
     <td style="width: 1%;" align="center">[[Arquivo:326-ShinyGrumpig.png|link=Shiny_Grumpig]]</td>
        imageSearch.addEventListener('input', function() {
    <td style="width: 11%;" align="center">'''[[Shiny Grumpig]]'''</td>
            const searchValue = this.value.trim().toLowerCase();
    <td style="width: 1%;" align="center">300</td>
            dropdown.innerHTML = '';
  </tr>
 
</table>",
            if (searchValue) {
        obs: "<center><b>Unown A</b></center>"
                Object.keys(imageList).forEach(imageName => {
    },
                    if (imageName.toLowerCase().includes(searchValue)) {
     {
                        const dropdownItem = document.createElement('div');
        label: "O ódio é um fardo muito grande para suportar (BEAR). Quem eu sou?",
                        dropdownItem.classList.add('dropdown-item');
        image: "/images/7/74/Unown-b.png",
                       
        obs: "<center><b>Unown B</b></center>"
                        const imgElement = document.createElement('img');
    },
                        imgElement.src = imageList[imageName].imageUrl;
    {
                        imgElement.alt = imageName;
        label: "Se você persegue (CHASE) algo desesperadamente, isso te ilude. Quem eu sou?",
                       
        image: "/images/6/66/Unown-c.png",
                        dropdownItem.appendChild(imgElement);
        obs: "<center><b>Unown C</b></center>"
                        dropdownItem.appendChild(document.createTextNode(imageName));
    },
                       
    {
                        dropdownItem.addEventListener('click', function() {
        label: "Você não pode controlar a direção (DIRECT) do vento, mas pode ajustar as velas. Quem eu sou?",
                            showImageInfo(imageName);
        image: "/images/2/23/Unown-d.png",
                            dropdown.style.display = 'none';
        obs: "<center><b>Unown D</b></center>"
                        });
    },
                        dropdown.appendChild(dropdownItem);
    {
                    }
        label: "A preparação é necessária antes de participar (ENGAGE) de qualquer reunião. Quem eu sou?",
                });
        image: "/images/4/42/Unown-e.png",
 
        obs: "<center><b>Unown E</b></center>"
                dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
    },
            } else {
    {
                dropdown.style.display = 'none';
        label: "É possível encontrar (FIND) esperança mesmo nos dias mais sombrios. Quem eu sou?",
            }
        image: "/images/7/70/Unown-f.png",
        });
        obs: "<center><b>Unown F</b></center>"
 
    },
        document.addEventListener('click', function(event) {
    {
            if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
        label: "Um amigo é um presente (GIFT) que você se dá. Quem eu sou?",
                dropdown.style.display = 'none';
        image: "/images/2/21/Unown-g.png",
            }
        obs: "<center><b>Unown G</b></center>"
        });
    },
 
    {
function showImageInfo(imageName) {
        label: "Nós não podemos ajudar todo mundo, mas todo mundo pode ajudar (HELP) alguém. Quem eu sou?",
    const imageInfo = imageList[imageName];
        image: "/images/1/19/Unown-h.png",
    let imagesHtml = `
        obs: "<center><b>Unown H</b></center>"
        <div class="image-item">
    },
            <img src="${imageInfo.imageUrl}" alt="${imageName}">
    {
        </div>
        label: "O medo pode aumentar (INCREASE) sua capacidade de sobreviver. Quem eu sou?",
        <div class="variations-container">
        image: "/images/f/f4/Unown-i.png",
    `;
        obs: "<center><b>Unown I</b></center>"
 
    },
    imageInfo.variations.forEach((variation, index) => {
    {
        imagesHtml += `
        label: "Somente quando juntar (JOIN) todos os pedaços é que você poderá ver a foto. Quem eu sou?",
            <div class="variation-item">
        image: "/images/0/02/Unown-j.png",
                <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">
        obs: "<center><b>Unown J</b></center>"
                <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 -->
        label: "Se você continuar (KEEP) seguindo em frente, você não terá que parar. Quem eu sou?",
                    <br> ${variation.description} <br> <!-- Descrição após a imagem -->
        image: "/images/9/9d/Unown-k.png",
                    <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
        obs: "<center><b>Unown K</b></center>"
                </div>
    },
            </div>
    {
        `;
        label: "Você ri de mim porque eu sou diferente, eu rio (LAUGH) de vocês porque são todos iguais. Quem eu sou?",
     });
        image: "/images/9/9c/Unown-l.png",
 
        obs: "<center><b>Unown L</b></center>"
    imagesHtml += '</div>';
    },
 
    {
     imageContainer.innerHTML = imagesHtml;
        label: "Decida-se (MAKE), talvez você não tenha outra chance. Quem eu sou?",
     imageContainer.classList.remove('hidden');
        image: "/images/9/94/Unown-m.png",
 
        obs: "<center><b>Unown M</b></center>"
    // Alternar imagens ao clicar no botão de troca
    },
    const swapButtons = document.querySelectorAll('.swap-button');
    {
 
        label: "Você deveria encostar (NUZZLE) em algum lugar. Quem eu sou?",
    swapButtons.forEach(button => {
        image: "/images/4/4e/Unown-n.png",
        const index = button.getAttribute('data-variation-index');
        obs: "<center><b>Unown N</b></center>"
        const variation = imageInfo.variations[index];
    },
        let currentImageIndex = 0;
    {
 
        label: "Você pode observar (OBSERVE) muito apenas assistindo. Quem eu sou?",
        button.addEventListener('click', () => {
        image: "/images/2/21/Unown-o.png",
            currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
        obs: "<center><b>Unown O</b></center>"
            const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
    },
            variationImage.src = variation.additionalImages[currentImageIndex].url;
    {
            variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
        label: "A vida é a farsa que todos devem executar (PERFORM). Quem eu sou?",
        });
        image: "/images/a/a8/Unown-p.png",
     });
        obs: "<center><b>Unown P</b></center>"
}
    },
 
    {
     </script>
        label: "Há momentos especiais que aceleram (QUICKEN) seu coração. Quem eu sou?",
</body>
        image: "/images/a/ae/Unown-q.png",
</html>
        obs: "<center><b>Unown Q</b></center>"
    },
    {
        label: "Você não precisa de algo para reassegurar (REASSURE) que você é real. Quem eu sou?",
        image: "/images/4/4f/Unown-r.png",
        obs: "<center><b>Unown R</b></center>"
    },
    {
        label: "Humanos estão sempre em busca (SEARCH) de significados. Quem eu sou?",
        image: "/images/f/fe/Unown-s.png",
        obs: "<center><b>Unown S</b></center>"
    },
    {
        label: "Se você disser (TELL) a verdade, não precisa se lembrar de nada. Quem eu sou?",
        image: "/images/1/12/Unown-t.png",
        obs: "<center><b>Unown T</b></center>"
    },
    {
        label: "Você não pode desfazer (UNDO) o passado... mas certamente pode não repeti-lo. Quem eu sou?",
        image: "/images/1/1a/Unown-u.png",
        obs: "<center><b>Unown U</b></center>"
    },
    {
        label: "Quando você sabe o que está fazendo, quaisquer obstáculos desaparecem (VANISH) do seu caminho. Quem eu sou?",
        image: "/images/1/15/Unown-v.png",
        obs: "<center><b>Unown V</b></center>"
    },
    {
        label: "Para ter sucesso, você deve sempre saber o que quer (WANT). Quem eu sou?",
        image: "/images/a/ad/Unown-w.png",
        obs: "<center><b>Unown W</b></center>"
    },
    {
        label: "XXXXX. Quem eu sou?",
        image: "/images/5/58/Unown-x.png",
        obs: "<center><b>Unown X</b></center>"
    },
    {
        label: "Às vezes, o melhor que você pode fazer é ceder (YIELD) à tentação. Quem eu sou?",
        image: "/images/f/f9/Unown-y.png",
        obs: "<center><b>Unown Y</b></center>"
    },
     {
        label: "Mantenha-se focado e amplie (ZOOM) suas metas. Quem eu sou?",
        image: "/images/8/81/Unown-z.png",
        obs: "<center><b>Unown Z</b></center>"
    }
]
</script>

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>