Template:Infobox Character: Difference between revisions

From Scooby-Doo Wiki
Jump to navigationJump to search
← Older editNewer edit →
No edit summary
No edit summary
Tag: Reverted
Line 9: Line 9:
<tr>
<tr>
<td colspan="2" style="text-align: center; padding: 0.5em;">
<td colspan="2" style="text-align: center; padding: 0.5em;">
[[File:{{{image|}}}|200px|alt={{{name|}}}]]
<!-- Image Tabs Container (Horizontally Scrollable) -->
<div id="tabs-container-{{{name|}}}" style="display: flex; overflow-x: auto; gap: 2px; margin-bottom: 5px; padding-bottom: 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;">
{{#if:{{{image1|}}}
|<button class="infobox-tab active" data-img="1" data-name="{{{name|}}}" style="background: #b0c4de; color: white; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab1_label|Image 1}}}</button>
}}
{{#if:{{{image2|}}}
|<button class="infobox-tab" data-img="2" data-name="{{{name|}}}" style="background: transparent; color: black; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab2_label|Image 2}}}</button>
}}
{{#if:{{{image3|}}}
|<button class="infobox-tab" data-img="3" data-name="{{{name|}}}" style="background: transparent; color: black; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab3_label|Image 3}}}</button>
}}
{{#if:{{{image4|}}}
|<button class="infobox-tab" data-img="4" data-name="{{{name|}}}" style="background: transparent; color: black; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab4_label|Image 4}}}</button>
}}
{{#if:{{{image5|}}}
|<button class="infobox-tab" data-img="5" data-name="{{{name|}}}" style="background: transparent; color: black; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab5_label|Image 5}}}</button>
}}
{{#if:{{{image6|}}}
|<button class="infobox-tab" data-img="6" data-name="{{{name|}}}" style="background: transparent; color: black; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab6_label|Image 6}}}</button>
}}
{{#if:{{{image7|}}}
|<button class="infobox-tab" data-img="7" data-name="{{{name|}}}" style="background: transparent; color: black; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab7_label|Image 7}}}</button>
}}
{{#if:{{{image8|}}}
|<button class="infobox-tab" data-img="8" data-name="{{{name|}}}" style="background: transparent; color: black; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab8_label|Image 8}}}</button>
}}
{{#if:{{{image9|}}}
|<button class="infobox-tab" data-img="9" data-name="{{{name|}}}" style="background: transparent; color: black; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab9_label|Image 9}}}</button>
}}
{{#if:{{{image10|}}}
|<button class="infobox-tab" data-img="10" data-name="{{{name|}}}" style="background: transparent; color: black; border: none; padding: 5px 10px; cursor: pointer; font-size: 88%; white-space: nowrap;">{{{tab10_label|Image 10}}}</button>
}}
</div>
<!-- Images (Only one visible at a time) -->
<div id="img-{{{name|}}}-1" class="infobox-image" data-name="{{{name|}}}" style="display: block; text-align: center;">
[[File:{{{image1|{{{image|}}}}}}|200px|alt={{{name|}}}]]
</div>
<div id="img-{{{name|}}}-2" class="infobox-image" data-name="{{{name|}}}" style="display: none; text-align: center;">
[[File:{{{image2|}}}|200px|alt={{{name|}}}]]
</div>
<div id="img-{{{name|}}}-3" class="infobox-image" data-name="{{{name|}}}" style="display: none; text-align: center;">
[[File:{{{image3|}}}|200px|alt={{{name|}}}]]
</div>
<div id="img-{{{name|}}}-4" class="infobox-image" data-name="{{{name|}}}" style="display: none; text-align: center;">
[[File:{{{image4|}}}|200px|alt={{{name|}}}]]
</div>
<div id="img-{{{name|}}}-5" class="infobox-image" data-name="{{{name|}}}" style="display: none; text-align: center;">
[[File:{{{image5|}}}|200px|alt={{{name|}}}]]
</div>
<div id="img-{{{name|}}}-6" class="infobox-image" data-name="{{{name|}}}" style="display: none; text-align: center;">
[[File:{{{image6|}}}|200px|alt={{{name|}}}]]
</div>
<div id="img-{{{name|}}}-7" class="infobox-image" data-name="{{{name|}}}" style="display: none; text-align: center;">
[[File:{{{image7|}}}|200px|alt={{{name|}}}]]
</div>
<div id="img-{{{name|}}}-8" class="infobox-image" data-name="{{{name|}}}" style="display: none; text-align: center;">
[[File:{{{image8|}}}|200px|alt={{{name|}}}]]
</div>
<div id="img-{{{name|}}}-9" class="infobox-image" data-name="{{{name|}}}" style="display: none; text-align: center;">
[[File:{{{image9|}}}|200px|alt={{{name|}}}]]
</div>
<div id="img-{{{name|}}}-10" class="infobox-image" data-name="{{{name|}}}" style="display: none; text-align: center;">
[[File:{{{image10|}}}|200px|alt={{{name|}}}]]
</div>
<br/>
<br/>
<small>{{{caption|}}}</small>
<small>{{{caption|}}}</small>
Line 86: Line 151:
</table>
</table>
</div>
</div>
<!-- JavaScript for Tab Switching -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.infobox-tab');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const imgNum = this.getAttribute('data-img');
const charName = this.getAttribute('data-name');
// Hide all images for this character
const images = document.querySelectorAll('.infobox-image[data-name="' + charName + '"]');
images.forEach(img => img.style.display = 'none');
// Show selected image
const selectedImg = document.getElementById('img-' + charName + '-' + imgNum);
if (selectedImg) selectedImg.style.display = 'block';
// Update tab styles
const container = this.parentElement;
const allTabs = container.querySelectorAll('.infobox-tab');
allTabs.forEach(t => {
t.style.background = 'transparent';
t.style.color = 'black';
});
this.style.background = '#b0c4de';
this.style.color = 'white';
});
});
});
</script>
</includeonly>
</includeonly>

Revision as of 16:34, 27 March 2026

Retrieved from "http://scooby.dakoda.wiki/index.php?title=Template:Infobox_Character&oldid=72"