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
 
(3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 5: Linha 5:
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Busca de Imagens por Nome</title>
     <title>Busca de Imagens por Nome</title>
 
</head>
</head>
<body>
<body>
Linha 19: Linha 20:


     <script>
     <script>


        // Elementos do DOM
         const imageSearch = document.getElementById('imageSearch');
         const imageSearch = document.getElementById('imageSearch');
         const dropdown = document.getElementById('dropdown');
         const dropdown = document.getElementById('dropdown');
         const imageContainer = document.getElementById('imageContainer');
         const imageContainer = document.getElementById('imageContainer');


        // Filtro de busca
         imageSearch.addEventListener('input', function() {
         imageSearch.addEventListener('input', function() {
             const searchValue = this.value.trim().toLowerCase();
             const searchValue = this.value.trim().toLowerCase();
Linha 36: Linha 34:
                         const dropdownItem = document.createElement('div');
                         const dropdownItem = document.createElement('div');
                         dropdownItem.classList.add('dropdown-item');
                         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.appendChild(document.createTextNode(imageName));
                       
                         dropdownItem.addEventListener('click', function() {
                         dropdownItem.addEventListener('click', function() {
                             showImageInfo(imageName);
                             showImageInfo(imageName);
Linha 58: Linha 62:
         });
         });


        // Exibir informações da imagem
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}" class="main-image"> <!-- Exibir imagem principal -->
             <img src="${imageInfo.imageUrl}" alt="${imageName}">
         </div>
         </div>
         <div class="variations-container">
         <div class="variations-container">
Linha 71: Linha 74:
         imagesHtml += `
         imagesHtml += `
             <div class="variation-item">
             <div class="variation-item">
                <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}">
                <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">
                <button class="swap-button" data-variation-index="${index}">Trocar</button>
                <div class="swap-button" data-variation-index="${index}"></div><br>
                 <div class="image-info">
                 <div class="image-info">
                     <img src="${variation.descriptionIMG}" alt="Description Image" class="description-image">  
                     <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"> <!-- Exibe a imagem antes da descrição -->
                     <p>${variation.description}</p>
                     <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>
                     <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                 </div>
                 </div>
Linha 82: Linha 85:
     });
     });


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


     // Adicionar funcionalidade ao botão "Trocar"
     // Alternar imagens ao clicar no botão de troca
     const swapButtons = document.querySelectorAll('.swap-button');
     const swapButtons = document.querySelectorAll('.swap-button');
     swapButtons.forEach(button => {
     swapButtons.forEach(button => {
         const index = button.getAttribute('data-variation-index');
         const index = button.getAttribute('data-variation-index');
Linha 95: Linha 100:
         button.addEventListener('click', () => {
         button.addEventListener('click', () => {
             currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
             currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
             const variationImage = button.previousElementSibling; // Atualizar a imagem da variação
             const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
             variationImage.src = variation.additionalImages[currentImageIndex].url;
             variationImage.src = variation.additionalImages[currentImageIndex].url;
            variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
         });
         });
     });
     });

Edição atual tal como às 19h22min de 22 de dezembro 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>

</head> <body> 

   <form id="imageForm">

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

   </form>

   <script>

       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=94150”