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

Ir para navegação Ir para pesquisar

Widget:Test2 (ver código-fonte)

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

173 bytes adicionados ,  23 de dezembro de 2024
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 6: Linha 6:
     <title>Busca de Imagens por Nome</title>
     <title>Busca de Imagens por Nome</title>
     <style>
     <style>
        /* Estilo básico */
         .input-group { margin-bottom: 1em; position: relative; }
        body {
         .dropdown {
            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: 1px solid #ccc;
             border-radius: 4px;
             display: none;
            font-size: 16px;
        }
 
        .dropdown {
             position: absolute;
             position: absolute;
             background-color: white;
             background-color: #fff;
            border: 1px solid #ccc;
            width: 100%;
             z-index: 1000;
             z-index: 1000;
             max-height: 200px;
             max-height: 150px;
             overflow-y: auto;
             overflow-y: auto;
             border-radius: 4px;
             width: 100%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
         }
         .dropdown-item {
         .dropdown-item {
             padding: 10px;
             padding: 8px;
             cursor: pointer;
             cursor: pointer;
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
            transition: background-color 0.2s;
         }
         }
 
        .dropdown-item img {
            margin-right: 10px;
        }
         .dropdown-item:hover {
         .dropdown-item:hover {
             background-color: #f0f0f0;
             background-color: #f0f0f0;
         }
         }
        .dropdown-item img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            border-radius: 4px;
        }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
             flex-wrap: wrap;
             flex-direction: column;
             gap: 20px;
             align-items: center;
            justify-content: center;
        }
        .image-item {
            margin-bottom: 1em;
            text-align: center;
         }
         }
         .image-item img {
         .image-item img {
             max-width: 100%;
             display: block;
             height: auto;
             margin: 0 auto;
            border: 1px solid #ddd;
            border-radius: 4px;
         }
         }


Linha 74: Linha 47:
             display: flex;
             display: flex;
             flex-wrap: wrap;
             flex-wrap: wrap;
             gap: 20px;
             justify-content: center;
            margin-top: 1em;
         }
         }


         .variation-item {
         .variation-item {
            width: 35%;
            box-sizing: border-box;
            margin: 5px;
             text-align: center;
             text-align: center;
             max-width: 200px;
             border: 1px solid ;
            padding: 10px;
         }
         }


         .variation-image {
         .variation-item img {
             width: 100px;
             display: block;
             height: auto;
             margin: 0 auto 10px;
            margin-bottom: 10px;
         }
         }


         .swap-button {
         .swap-button {  
             width: 30px;
             margin-top: 10px;
            height: 30px;
            background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center center;
            background-size: cover;
             cursor: pointer;
             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;
             margin: 0 auto;
        }
        .hidden {
            display: none;
         }
         }
     </style>
     </style>
Linha 115: Linha 90:


     <script>
     <script>
         // Exemplo de dados
         // Função para gerar o link da imagem da Wiki
        function generateWikiImageUrl(imageName) {
            return `https://wiki.pokexgames.com/index.php/Special:FilePath/${imageName}.png`;
        }
 
        // Lista de imagens e variações
         const imageList = {
         const imageList = {
             Squirtle: {
             Squirtle: {
                 imageUrl: "https://wiki.pokexgames.com/index.php/Special:FilePath/007-Squirtle.png",
                 imageUrl: generateWikiImageUrl('007-Squirtle'), // URL dinâmica da imagem
                 variations: [
                 variations: [
                     {
                     {
                         description: "Squirtle usando óculos",
                         description: "Squirtle usando óculos",
                         descriptionIMG: "https://wiki.pokexgames.com/images/2/29/Squirtle_Glasses.png",
                         descriptionIMG: generateWikiImageUrl('Squirtle_Glasses'),  // URL da variação
                         additionalImages: [
                         additionalImages: [
                             { url: "https://example.com/squirtle1.png", width: 100 },
                             { url: generateWikiImageUrl('squirtle1'), width: 100 },
                             { url: "https://example.com/squirtle2.png", width: 120 }
                             { url: generateWikiImageUrl('squirtle2'), width: 120 }
                         ],
                         ],
                         obtain: { url: "https://example.com/obter-squirtle", text: "Como obter" }
                         obtain: { url: "https://example.com/obter-squirtle", text: "Como obter" }
Linha 132: Linha 112:
             },
             },
             Charmander: {
             Charmander: {
                 imageUrl: "https://wiki.pokexgames.com/index.php/Special:FilePath/004-Charmander.png",
                 imageUrl: generateWikiImageUrl('004-Charmander'), // URL dinâmica da imagem
                 variations: [
                 variations: [
                     {
                     {
                         description: "Charmander brilhante",
                         description: "Charmander brilhante",
                         descriptionIMG: "https://example.com/charmander-shiny.png",
                         descriptionIMG: generateWikiImageUrl('charmander-shiny'), // URL da variação
                         additionalImages: [
                         additionalImages: [
                             { url: "https://example.com/charmander1.png", width: 100 },
                             { url: generateWikiImageUrl('charmander1'), width: 100 },
                             { url: "https://example.com/charmander2.png", width: 120 }
                             { url: generateWikiImageUrl('charmander2'), width: 120 }
                         ],
                         ],
                         obtain: { url: "https://example.com/obter-charmander", text: "Como obter" }
                         obtain: { url: "https://example.com/obter-charmander", text: "Como obter" }
Linha 200: Linha 180:
                 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;">
                        <div class="swap-button" data-variation-index="${index}"></div>
                        <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" style="margin-right: 5px; display: inline-block;">
                             <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>
                             <br> ${variation.description} <br> <!-- Descrição após a imagem -->
                             <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank" rel="noopener noreferrer">${variation.obtain.text}</a>
                             <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                         </div>
                         </div>
                     </div>
                     </div>
Linha 216: Linha 196:
             imageContainer.classList.remove('hidden');
             imageContainer.classList.remove('hidden');


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


Linha 225: Linha 206:
                 button.addEventListener('click', () => {
                 button.addEventListener('click', () => {
                     currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                     currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                     const variationImage = button.previousElementSibling;
                     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`;
                 });
                 });
             });
             });
Renee
Administradores
6 385

edições

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

Menu de navegação