查看“︁Widget:GF立绘切换”︁的源代码

<includeonly><script>
(function() {
    function initSwitcher() {
        document.querySelectorAll('.gf-infobox-new').forEach(function(box) {
            if (box.dataset.switcherReady) return;
            box.dataset.switcherReady = 'true';
            
            var container = box.querySelector('.gf-image-container');
            var thumbItems = box.querySelectorAll('.gf-thumb-item');
            
            if (!container || thumbItems.length < 2) return;
            
            // 获取缩略图中已渲染的图片URL，建立映射
            function getThumbImageUrl(thumbItem) {
                var img = thumbItem.querySelector('.gf-thumb-img img');
                if (img && img.src) {
                    // 从缩略图URL推导出大图URL
                    // 缩略图URL格式: /images/thumb/f/ff/文件名/60px-文件名
                    // 大图URL格式: /images/f/ff/文件名
                    var thumbSrc = img.src;
                    
                    // 移除缩略图路径中的 /thumb/ 和尺寸前缀
                    var fullSrc = thumbSrc.replace(/\/thumb\//, '/');
                    fullSrc = fullSrc.replace(/\/\d+px-/, '/');
                    // 移除可能的缩略图参数
                    fullSrc = fullSrc.replace(/\?.*$/, '');
                    
                    return fullSrc;
                }
                return null;
            }
            
            thumbItems.forEach(function(item) {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // 如果已经是激活状态，不做任何事
                    if (this.classList.contains('active')) return;
                    
                    var newImgUrl = getThumbImageUrl(this);
                    if (!newImgUrl) {
                        console.warn('Cannot get image URL from thumbnail');
                        return;
                    }
                    
                    // 预加载新图片
                    var preloadImg = new Image();
                    preloadImg.src = newImgUrl;
                    
                    preloadImg.onload = function() {
                        // 获取旧图片
                        var oldImg = container.querySelector('img');
                        
                        // 创建新图片元素
                        var newImg = document.createElement('img');
                        newImg.src = newImgUrl;
                        newImg.style.maxWidth = '100%';
                        newImg.style.maxHeight = '420px';
                        newImg.style.objectFit = 'contain';
                        newImg.style.opacity = '0';
                        newImg.style.transition = 'opacity 0.3s ease';
                        
                        // 淡出旧图
                        if (oldImg) {
                            oldImg.style.transition = 'opacity 0.2s ease';
                            oldImg.style.opacity = '0';
                        }
                        
                        // 替换图片
                        container.innerHTML = '';
                        container.appendChild(newImg);
                        
                        // 淡入新图
                        requestAnimationFrame(function() {
                            requestAnimationFrame(function() {
                                newImg.style.opacity = '1';
                            });
                        });
                        
                        // 更新激活状态
                        thumbItems.forEach(function(t) { t.classList.remove('active'); });
                        item.classList.add('active');
                    };
                    
                    preloadImg.onerror = function() {
                        console.error('Failed to load image: ' + newImgUrl);
                    };
                });
            });
        });
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSwitcher);
    } else {
        initSwitcher();
    }
    
    // 兼容 MediaWiki 动态加载
    if (window.mw && mw.hook) {
        mw.hook('wikipage.content').add(initSwitcher);
    }
})();
</script></includeonly>