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
 
(19 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 52: Linha 52:


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


         .swap-button {
         .swap-button {  
             margin-top: 10px;
             margin-top: 10px;
             cursor: pointer;
             cursor: pointer;
             width: 15px;
             width: 15px;
             height: 15px;
             height: 15px;
             background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center;
             background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
             background-size: contain;
             background-size: contain;
             display: block;
             display: block;
Linha 96: Linha 96:
                     {  
                     {  
                         description: 'Squirtle Purple Ninja Pack',
                         description: 'Squirtle Purple Ninja Pack',
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                         obtain: {
                         obtain: {
                             url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                             url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                            imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                             text: 'Estilista'
                             text: 'Estilista'
                         },
                         },
                         additionalImages: [
                         additionalImages: [
                             { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png', width: 45}, // Frente
                             { 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', width: 45}, // Lado Esquerdo
                             { 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', width: 45}, // Costas
                             { 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', width: 45}  // Lado Direito
                             { url: 'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png'}  // Lado Direito
                         ]
                         ]
                     },
                     },
                     {   
                     {   
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                         description: 'Squirtle Red Ninja Pack',
                         description: 'Squirtle Red Ninja Pack',
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                         obtain: {
                         obtain: {
                             url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                             url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
Linha 116: Linha 116:
                         },
                         },
                         additionalImages: [
                         additionalImages: [
                             { url: 'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png', width: 45}, // Frente
                             { 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', width: 45}, // Lado Esquerdo
                             { 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', width: 45}, // Costas
                             { 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', width: 45}  // Lado Direito
                             { url: 'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png'}  // Lado Direito
                         ]
                         ]
                     }
                     }
Linha 167: Linha 167:
         });
         });


        function showImageInfo(imageName) {
function showImageInfo(imageName) {
            const imageInfo = imageList[imageName];
    const imageInfo = imageList[imageName];
            let imagesHtml = `
    let imagesHtml = `
                <div class="image-item">
        <div class="image-item">
                    <img src="${imageInfo.imageUrl}" alt="${imageName}">
            <img src="${imageInfo.imageUrl}" alt="${imageName}">
        </div>
        <div class="variations-container">
    `;
 
    imageInfo.variations.forEach((variation, index) => {
        imagesHtml += `
            <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>
                <div class="variations-container">
            </div>
            `;
        `;
    });


            imageInfo.variations.forEach((variation, index) => {
    imagesHtml += '</div>';
                imagesHtml += `
                    <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>
                        <div class="image-info">
                            <b>Nome do Addon</b>: ${variation.description}
                            <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                        </div>
                    </div>
                `;
            });


            imagesHtml += '</div>';
    imageContainer.innerHTML = imagesHtml;
    imageContainer.classList.remove('hidden');


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


            // Alternar imagens ao clicar no botão de troca
    swapButtons.forEach(button => {
            const swapButtons = document.querySelectorAll('.swap-button');
        const index = button.getAttribute('data-variation-index');
        const variation = imageInfo.variations[index];
        let currentImageIndex = 0;


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


                button.addEventListener('click', () => {
                    currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                    const variationImage = button.previousElementSibling;
                    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>