|
|
| 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;"> |
| <!-- Image Tabs Container (Horizontally Scrollable) --> | | [[File:{{{image|}}}|200px|alt={{{name|}}}]] |
| <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 151: |
Line 86: |
| </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> |
