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

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 98: Linha 98:
                             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',
                             text: 'Estilista'
                             text: 'Estilista'
                         }  
                         },
                        additionalImages: [
                            'https://example.com/front1.png',  // Frente
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',  // Lado Esquerdo
                            'https://example.com/back1.png',  // Costas
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png'  // Lado Direito
                        ]
                     },
                     },
                     {   
                     {   
Linha 106: Linha 112:
                             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',
                             text: 'Estilista'
                             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
                        ]
                     }
                     }
                ],
                additionalImages: [
                    'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png', // Frente
                    'https://example.com/image2.png', // Lado Esquerdo
                    'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png', // Costas
                    'https://example.com/image4.png'  // Lado Direito
                 ]
                 ]
             },
             },
Linha 166: Linha 172:
                 </div>
                 </div>
                 <div class="image-item">
                 <div class="image-item">
                     <img id="centralImage" src="${imageInfo.additionalImages[0]}" alt="Central Image" class="central-image">
                     <img id="centralImage" src="${imageInfo.variations[0].additionalImages[0]}" alt="Central Image" class="central-image">
                 </div>
                 </div>
                <div class="variations-container" id="variationsContainer">
             `;
             `;


             if (imageInfo.variations) {
             imageInfo.variations.forEach(variation => {
                imagesHtml += '<div class="variations-container">';
                imagesHtml += `
                imageInfo.variations.forEach(variation => {
                    <div class="variation-item">
                    imagesHtml += `
                        <img src="${variation.additionalImages[0]}" alt="Variation Image" class="variation-image">
                        <div class="variation-item">
                        <div class="image-info">
                            <img src="${variation.imageUrl}" alt="Variation Image">
                            <b>Nome do Addon</b>: ${variation.description}  
                            <div class="image-info">
                            <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                                <b>Nome do Addon</b>: ${variation.description}  
                                <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                            </div>
                         </div>
                         </div>
                     `;
                     </div>
                });
                `;
                imagesHtml += '</div>';
            });
            }
 
            imagesHtml += '</div>';


             imageContainer.innerHTML = imagesHtml;
             imageContainer.innerHTML = imagesHtml;
Linha 192: Linha 197:
             let currentImageIndex = 0;
             let currentImageIndex = 0;
             const centralImage = document.getElementById('centralImage');
             const centralImage = document.getElementById('centralImage');
            const variationsContainer = document.getElementById('variationsContainer');
            const variationImages = variationsContainer.getElementsByClassName('variation-image');
              
              
             centralImage.addEventListener('click', () => {
             centralImage.addEventListener('click', () => {
                 currentImageIndex = (currentImageIndex + 1) % imageInfo.additionalImages.length;
                 currentImageIndex = (currentImageIndex + 1) % imageInfo.variations[0].additionalImages.length;
                 centralImage.src = imageInfo.additionalImages[currentImageIndex];
                const currentVariationImages = Array.from(variationImages);
                currentVariationImages.forEach((img, index) => {
                    img.src = imageInfo.variations[index].additionalImages[currentImageIndex];
                });
                 centralImage.src = imageInfo.variations[0].additionalImages[currentImageIndex];
             });
             });
         }
         }
5 801

edições

Menu de navegação