5 801
edições
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 | |||
] | |||
} | } | ||
] | ] | ||
}, | }, | ||
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"> | |||
`; | `; | ||
imageInfo.variations.forEach(variation => { | |||
imagesHtml += ` | |||
<div class="variation-item"> | |||
<img src="${variation.additionalImages[0]}" alt="Variation Image" class="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> | ||
`; | </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]; | |||
}); | }); | ||
} | } |