查看“︁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 extractFullImageUrl(thumbItem) {
                var img = thumbItem.querySelector('img');
                if (!img) return null;
                
                var src = img.src;
                // MediaWiki缩略图URL格式:
                // /images/thumb/a/ab/Filename.jpg/60px-Filename.jpg
                // 需要转换为:
                // /images/a/ab/Filename.jpg
                
                // 方法1: 移除 /thumb/ 和 /尺寸px-文件名 部分
                var url = src.replace('/thumb/', '/');
                // 移除最后的 /数字px-文件名 部分
                url = url.replace(/\/\d+px-[^\/]+$/, '');
                // 重新添加文件名
                var filename = src.split('/').pop().replace(/^\d+px-/, '');
                url = url + '/' + filename;
                
                return url;
            }
            
            thumbItems.forEach(function(item) {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    if (this.classList.contains('active')) return;
                    
                    var newImgUrl = extractFullImageUrl(this);
                    if (!newImgUrl) {
                        console.warn('Cannot extract image URL');
                        return;
                    }
                    
                    // 保存容器当前内容
                    var currentHTML = container.innerHTML;
                    
                    // 尝试加载新图片
                    var testImg = new Image();
                    testImg.onload = function() {
                        // 创建新图片并设置样式
                        var newImgHTML = '<img src="' + newImgUrl + '" style="max-width:100%;max-height:420px;object-fit:contain;opacity:1;transition:opacity 0.3s ease;">';
                        
                        // 淡出效果
                        var oldImg = container.querySelector('img');
                        if (oldImg) {
                            oldImg.style.opacity = '0';
                            oldImg.style.transition = 'opacity 0.15s ease';
                        }
                        
                        // 延迟替换
                        setTimeout(function() {
                            container.innerHTML = newImgHTML;
                            var newImg = container.querySelector('img');
                            if (newImg) {
                                newImg.style.opacity = '0';
                                requestAnimationFrame(function() {
                                    newImg.style.opacity = '1';
                                });
                            }
                        }, 150);
                        
                        // 更新激活状态
                        thumbItems.forEach(function(t) { t.classList.remove('active'); });
                        item.classList.add('active');
                    };
                    
                    testImg.onerror = function() {
                        console.error('Cannot load: ' + newImgUrl);
                        // 尝试备用URL
                        var altUrl = newImgUrl.replace(/\/images\//, '/images/thumb/') + '/280px-' + newImgUrl.split('/').pop();
                        testImg.src = altUrl;
                    };
                    
                    testImg.src = newImgUrl;
                });
            });
        });
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSwitcher);
    } else {
        initSwitcher();
    }
    
    if (window.mw && mw.hook) {
        mw.hook('wikipage.content').add(initSwitcher);
    }
})();
</script></includeonly>