5 801
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 72: | Linha 72: | ||
width: 200px; /* Ajuste o tamanho conforme necessário */ | width: 200px; /* Ajuste o tamanho conforme necessário */ | ||
height: 200px; /* Ajuste o tamanho conforme necessário */ | height: 200px; /* Ajuste o tamanho conforme necessário */ | ||
} | |||
.swap-button { | |||
margin-top: 10px; | |||
cursor: pointer; | |||
width: 30px; | |||
height: 30px; | |||
background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center; | |||
background-size: contain; | |||
} | } | ||
</style> | </style> | ||
Linha 101: | Linha 110: | ||
additionalImages: [ | additionalImages: [ | ||
'https://example.com/front1.png', // Frente | 'https://example.com/front1.png', // Frente | ||
'https:// | 'https://example.com/left1.png', // Lado Esquerdo | ||
'https://example.com/back1.png', // Costas | 'https://example.com/back1.png', // Costas | ||
'https:// | 'https://example.com/right1.png' // Lado Direito | ||
] | ] | ||
}, | }, | ||
Linha 177: | Linha 186: | ||
`; | `; | ||
imageInfo.variations.forEach(variation => { | imageInfo.variations.forEach((variation, index) => { | ||
imagesHtml += ` | imagesHtml += ` | ||
<div class="variation-item"> | <div class="variation-item"> | ||
Linha 185: | Linha 194: | ||
<b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a> | <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a> | ||
</div> | </div> | ||
<div class="swap-button" data-index="${index}"></div> | |||
</div> | </div> | ||
`; | `; | ||
Linha 195: | Linha 205: | ||
// Alternar imagens ao clicar na imagem centralizada | // Alternar imagens ao clicar na imagem centralizada | ||
const centralImage = document.getElementById('centralImage'); | const centralImage = document.getElementById('centralImage'); | ||
const | const variationsContainers = document.getElementById('variationsContainer'); | ||
const | const swapButtons = variationsContainers.getElementsByClassName('swap-button'); | ||
Array.from(swapButtons).forEach(button => { | |||
button.addEventListener('click', () => { | |||
const index = button.getAttribute('data-index'); | |||
const variation = imageInfo.variations[index]; | |||
let currentImageIndex = 0; | |||
button.addEventListener('click', () => { | |||
currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length; | |||
button.previousElementSibling.src = variation.additionalImages[currentImageIndex]; | |||
if (index === 0) { // Atualiza a imagem centralizada apenas para a primeira variação | |||
centralImage.src = variation.additionalImages[currentImageIndex]; | |||
} | |||
}); | |||
}); | }); | ||
}); | }); | ||
} | } |