5 667
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 65: | Linha 65: | ||
display: block; | display: block; | ||
margin: 0 auto 10px; | margin: 0 auto 10px; | ||
} | |||
.central-image { | |||
margin-top: 1em; | |||
cursor: pointer; | |||
} | } | ||
</style> | </style> | ||
Linha 101: | Linha 106: | ||
} | } | ||
} | } | ||
], | |||
additionalImages: [ | |||
'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png', // Frente | |||
'https://wiki.pokexgames.com/images/d/d4/Beleno1.png', // Lado Esquerdo | |||
'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png', // Costas | |||
'https://wiki.pokexgames.com/images/d/d4/Beleno1.png' // Lado Direito | |||
] | ] | ||
}, | }, | ||
Linha 146: | Linha 157: | ||
}); | }); | ||
function showImageInfo(imageName) { | function showImageInfo(imageName) { | ||
const imageInfo = imageList[imageName]; | |||
let imagesHtml = ` | |||
<div class="image-item"> | |||
<img src="${imageInfo.imageUrl}" alt="${imageName}"> | |||
</div> | |||
<div class="image-item"> | |||
<img id="centralImage" src="${imageInfo.additionalImages[0]}" alt="Central Image" class="central-image"> | |||
<div class=" | |||
<img src="${ | |||
</div> | </div> | ||
`; | `; | ||
if (imageInfo.variations) { | |||
imagesHtml += '<div class="variations-container">'; | |||
imageInfo.variations.forEach(variation => { | |||
imagesHtml += ` | |||
<div class="variation-item"> | |||
<img src="${variation.imageUrl}" alt="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> | |||
`; | |||
}); | |||
imagesHtml += '</div>'; | |||
} | |||
imageContainer.innerHTML = imagesHtml; | |||
imageContainer.classList.remove('hidden'); | |||
// Alternar imagens ao clicar na imagem centralizada | |||
let currentImageIndex = 0; | |||
const centralImage = document.getElementById('centralImage'); | |||
centralImage.addEventListener('click', () => { | |||
currentImageIndex = (currentImageIndex + 1) % imageInfo.additionalImages.length; | |||
centralImage.src = imageInfo.additionalImages[currentImageIndex]; | |||
}); | |||
} | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |