5 801
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 167: | Linha 167: | ||
}); | }); | ||
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.descriptionIMG}" alt="Description Image" style="width: 45px; margin-bottom: 5px;"> <!-- Adicionando a imagem da descrição --> | |||
<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="image-info"> | |||
<b>Nome do Addon</b>: ${variation.description} <br> <!-- Mudando a ordem para exibir a descrição após a imagem --> | |||
<b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a> | |||
</div> | </div> | ||
</div> | |||
`; | |||
}); | |||
imagesHtml += '</div>'; | |||
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; | |||
variationImage.src = variation.additionalImages[currentImageIndex].url; | |||
variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`; | |||
}); | |||
}); | |||
} | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |