PokeXGames

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

Widget Discussão

Widget:Test2 (ver código-fonte)

Edição das 04h26min de 23 de dezembro de 2024

7 048 bytes adicionados ,  23 de dezembro de 2024
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
<script>
<!DOCTYPE html>
     // Função corrigida para construir os caminhos das imagens dinamicamente
<html lang="pt-BR">
    function getMediaWikiImagePath(imageName) {
<head>
        return `https://wiki.pokexgames.com/index.php/Special:FilePath/${encodeURIComponent(imageName)}`;
    <meta charset="UTF-8">
    }
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Busca de Imagens por Nome</title>
     <style>
        /* Estilo básico */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }
 
        .input-group {
            position: relative;
            margin-bottom: 20px;
        }
 
        #imageSearch {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
 
        .dropdown {
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            width: 100%;
            z-index: 1000;
            max-height: 200px;
            overflow-y: auto;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
 
        .dropdown-item {
            padding: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: background-color 0.2s;
        }
 
        .dropdown-item:hover {
            background-color: #f0f0f0;
        }
 
        .dropdown-item img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            border-radius: 4px;
        }
 
        .image-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
 
        .image-item img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
        }


    // Exemplo de uso no objeto `imageList`
         .variations-container {
    const imageList = {
             display: flex;
         'Squirtle': {
             flex-wrap: wrap;
             imageUrl: getMediaWikiImagePath('007-Squirtle.png'),
            gap: 20px;
             variations: [
                {
                    description: 'Squirtle Purple Ninja Pack',
                    descriptionIMG: getMediaWikiImagePath('Purple_Stripe.png'),
                    additionalImages: [
                        { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Frente.png') },
                        { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Esquerda.png') },
                        { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Costas.png') },
                        { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Direita.png') },
                    ]
                }
            ]
         }
         }
    };


     // Exemplo: Renderizando a imagem principal no console (ou em um HTML)
        .variation-item {
    console.log(imageList['Squirtle'].imageUrl);
            text-align: center;
</script>
            max-width: 200px;
        }
 
        .variation-image {
            width: 100px;
            height: auto;
            margin-bottom: 10px;
        }
 
        .swap-button {
            width: 30px;
            height: 30px;
            background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center center;
            background-size: cover;
            cursor: pointer;
            margin: 0 auto;
        }
 
        .hidden {
            display: none;
        }
     </style>
</head>
<body>
    <form id="imageForm">
        <div class="input-group">
            <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
            <div id="dropdown" class="dropdown"></div>
        </div>
 
        <div id="imageContainer" class="image-container hidden">
            <!-- As imagens e suas informações serão exibidas aqui -->
        </div>
    </form>
 
    <script>
        // Exemplo de dados
        const imageList = {
            Squirtle: {
                imageUrl: "https://wiki.pokexgames.com/index.php/Special:FilePath/007-Squirtle.png",
                variations: [
                    {
                        description: "Squirtle usando óculos",
                        descriptionIMG: "https://wiki.pokexgames.com/images/2/29/Squirtle_Glasses.png",
                        additionalImages: [
                            { url: "https://example.com/squirtle1.png", width: 100 },
                            { url: "https://example.com/squirtle2.png", width: 120 }
                        ],
                        obtain: { url: "https://example.com/obter-squirtle", text: "Como obter" }
                    }
                ]
            },
            Charmander: {
                imageUrl: "https://wiki.pokexgames.com/index.php/Special:FilePath/004-Charmander.png",
                variations: [
                    {
                        description: "Charmander brilhante",
                        descriptionIMG: "https://example.com/charmander-shiny.png",
                        additionalImages: [
                            { url: "https://example.com/charmander1.png", width: 100 },
                            { url: "https://example.com/charmander2.png", width: 120 }
                        ],
                        obtain: { url: "https://example.com/obter-charmander", text: "Como obter" }
                    }
                ]
            }
        };
 
        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 = `
                <div class="image-item">
                    <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}">
                        <div class="swap-button" data-variation-index="${index}"></div>
                        <div class="image-info">
                            <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;">
                            <br>${variation.description}<br>
                            <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank" rel="noopener noreferrer">${variation.obtain.text}</a>
                        </div>
                    </div>
                `;
            });
 
            imagesHtml += `</div>`;
 
            imageContainer.innerHTML = imagesHtml;
            imageContainer.classList.remove('hidden');
 
            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;
                    variationImage.src = variation.additionalImages[currentImageIndex].url;
                });
            });
        }
    </script>
</body>
</html>
Renee
Administradores
6 392

edições

Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/94174”