5 801
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 61: | Linha 61: | ||
.variation-item img { | .variation-item img { | ||
display: block; | display: block; | ||
margin: 0 auto 10px; | margin: 0 auto 10px; | ||
Linha 104: | Linha 102: | ||
}, | }, | ||
additionalImages: [ | additionalImages: [ | ||
'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png', | { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png', width: 30 }, // Frente | ||
'https://wiki.pokexgames.com/images/5/50/Squirtle_Purple_Ninja_Pack_Esquerda.png', | { url: 'https://wiki.pokexgames.com/images/5/50/Squirtle_Purple_Ninja_Pack_Esquerda.png', width: 30 }, // Lado Esquerdo | ||
'https://wiki.pokexgames.com/images/a/af/Squirtle_Purple_Ninja_Pack_Direita.png', | { url: 'https://wiki.pokexgames.com/images/a/af/Squirtle_Purple_Ninja_Pack_Direita.png', width: 30 }, // Costas | ||
'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png' | { url: 'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png', width: 30 } // Lado Direito | ||
] | ] | ||
}, | }, | ||
Linha 118: | Linha 116: | ||
}, | }, | ||
additionalImages: [ | additionalImages: [ | ||
'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png', | { url: 'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png', width: 30 }, // Frente | ||
'https://wiki.pokexgames.com/images/1/1e/Squirtle_Red_Ninja_Pack_Esquerda.png', | { url: 'https://wiki.pokexgames.com/images/1/1e/Squirtle_Red_Ninja_Pack_Esquerda.png', width: 30 }, // Lado Esquerdo | ||
'https://wiki.pokexgames.com/images/0/01/Squirtle_Red_Ninja_Pack_Costas.png', | { url: 'https://wiki.pokexgames.com/images/0/01/Squirtle_Red_Ninja_Pack_Costas.png', width: 30 }, // Costas | ||
'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png' | { url: 'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png', width: 30 } // Lado Direito | ||
] | ] | ||
} | } | ||
Linha 181: | Linha 179: | ||
imagesHtml += ` | imagesHtml += ` | ||
<div class="variation-item"> | <div class="variation-item"> | ||
<img src="${variation.additionalImages[0]}" alt="Variation Image" class="variation-image" data-variation-index="${index}"> | <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"> | <div class="image-info"> | ||
<b>Nome do Addon</b>: ${variation.description} | <b>Nome do Addon</b>: ${variation.description} | ||
Linha 207: | Linha 205: | ||
currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length; | currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length; | ||
const variationImage = button.previousElementSibling; | const variationImage = button.previousElementSibling; | ||
variationImage.src = variation.additionalImages[currentImageIndex]; | variationImage.src = variation.additionalImages[currentImageIndex].url; | ||
variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`; | |||
}); | }); | ||
}); | }); |