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
 
(38 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>
    <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: 30%;
            box-sizing: border-box;
            margin: 10px;
            text-align: center;
            border: 1px solid #ccc;
            padding: 10px;
        }
 
        .variation-item img {
            width: 100px;
            height: 100px;
            display: block;
            margin: 0 auto 10px;
        }
 
        .central-image {
            margin-top: 1em;
            cursor: pointer;
            width: 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>
</head>
</head>
<body>
<body>
Linha 97: Linha 20:


     <script>
     <script>
        const imageList = {
            'Charmander': {
                imageUrl: 'https://wiki.pokexgames.com/images/6/65/004-Charmander.png',
                variations: [
                    {
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                        description: 'Charmander XXX',
                        obtain: {
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                            text: 'Estilista'
                        },
                        additionalImages: [
                            'https://example.com/front1.png',  // Frente
                            'https://example.com/left1.png',  // Lado Esquerdo
                            'https://example.com/back1.png',  // Costas
                            'https://example.com/right1.png'  // Lado Direito
                        ]
                    },
                    { 
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                        description: 'Charmander brabo.',
                        obtain: {
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                            text: 'Estilista'
                        },
                        additionalImages: [
                            'https://example.com/front2.png',  // Frente
                            'https://example.com/left2.png',  // Lado Esquerdo
                            'https://example.com/back2.png',  // Costas
                            'https://example.com/right2.png'  // Lado Direito
                        ]
                    }
                ]
            },
        };


         const imageSearch = document.getElementById('imageSearch');
         const imageSearch = document.getElementById('imageSearch');
Linha 174: Linha 62:
         });
         });


        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="image-item">
            </div>
                    <img id="centralImage" src="${imageInfo.variations[0].additionalImages[0]}" alt="Central Image" class="central-image">
        `;
                </div>
    });
                <div class="variations-container" id="variationsContainer">
            `;


            imageInfo.variations.forEach((variation, index) => {
    imagesHtml += `</div>`;
                imagesHtml += `
                    <div class="variation-item">
                        <img src="${variation.additionalImages[0]}" alt="Variation Image" class="variation-image">
                        <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 class="swap-button" data-index="${index}"></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 na imagem centralizada
    swapButtons.forEach(button => {
            const centralImage = document.getElementById('centralImage');
        const index = button.getAttribute('data-variation-index');
            const variationsContainers = document.getElementById('variationsContainer');
        const variation = imageInfo.variations[index];
            const swapButtons = variationsContainers.getElementsByClassName('swap-button');
        let currentImageIndex = 0;


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


                    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];
                        }
                    });
                });
            });
        }
     </script>
     </script>
</body>
</body>
</html>
</html>

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”