Widget:GF立绘切换：修订间差异

←上一编辑下一编辑→

可视化wikitext

@@ 第1行： / 第1行： @@
-	<script>
+<includeonly><script>
-	(function() {
+(function() {
-	    var containers = document.querySelectorAll('.infotemplatebox');
+    // 等待DOM和图片加载完成
-	    containers.forEach(function(container) {
+    function initSwitcher() {
-	        var tabs = container.querySelectorAll('.gf-tab');
+        document.querySelectorAll('.gf-infobox-new').forEach(function(box) {
-	        var slides = container.querySelectorAll('.gf-slide');
+            if (box.dataset.initialized) return;
-	        if (tabs.length === 0 || slides.length === 0) return;
+            box.dataset.initialized = 'true';
-	        tabs.forEach(function(tab) {
-	            tab.addEventListener('click', function() {
+            var container = box.querySelector('.gf-image-container');
-	                var index = parseInt(this.getAttribute('data-index'));
+            var thumbs = box.querySelectorAll('.gf-thumb-item');
-	                tabs.forEach(function(t) { t.classList.remove('active'); });
-	                slides.forEach(function(s) { s.classList.remove('active'); });
+            if (!container || thumbs.length < 2) return;
-	                this.classList.add('active');
-	                if (slides[index]) {
+            thumbs.forEach(function(thumb) {
-	                    slides[index].classList.add('active');
+                thumb.addEventListener('click', function(e) {
-	                }
+                    e.preventDefault();
-	            });
-	        });
+                    // 更新激活状态
-	    });
+                    thumbs.forEach(function(t) { t.classList.remove('active'); });
-	})();
+                    this.classList.add('active');
-	</script>
+                    // 获取新图片的文件名
+                    var newFile = this.dataset.img;
+                    if (!newFile) return;
+                    // 淡出旧图片
+                    var oldImg = container.querySelector('img');
+                    if (oldImg) {
+                        oldImg.style.opacity = '0';
+                        oldImg.style.transition = 'opacity 0.2s ease';
+                    }
+                    // 创建并加载新图片
+                    var newImg = document.createElement('img');
+                    newImg.src = newFile; // MediaWiki会自动处理文件路径
+                    newImg.style.maxWidth = '100%';
+                    newImg.style.maxHeight = '400px';
+                    newImg.style.objectFit = 'contain';
+                    newImg.style.opacity = '0';
+                    newImg.style.transition = 'opacity 0.3s ease';
+                    newImg.onload = function() {
+                        // 替换内容
+                        container.innerHTML = '';
+                        container.appendChild(newImg);
+                        // 触发淡入
+                        requestAnimationFrame(function() {
+                            newImg.style.opacity = '1';
+                        });
+                    };
+                    newImg.onerror = function() {
+                        // 如果加载失败，恢复原状
+                        if (oldImg) {
+                            oldImg.style.opacity = '1';
+                        }
+                    };
+                });
+            });
+        });
+    }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initSwitcher);
+    } else {
+        initSwitcher();
+    }
+    // 针对动态加载的内容再次尝试
+    if (window.mw && mw.hook) {
+        mw.hook('wikipage.content').add(initSwitcher);
+    }
+})();
+</script></includeonly>

2026年5月15日 (五) 13:40的版本