打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

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

来自OGAS数据中枢
弃权者留言 | 贡献
无编辑摘要
弃权者留言 | 贡献
无编辑摘要
第11行: 第11行:
             if (!container || thumbItems.length < 2) return;
             if (!container || thumbItems.length < 2) return;
              
              
             // 获取缩略图中已渲染图片URL,建立映射
             // 直接从缩略图中提取完整大图URL
             function getThumbImageUrl(thumbItem) {
             function extractFullImageUrl(thumbItem) {
                 var img = thumbItem.querySelector('.gf-thumb-img img');
                 var img = thumbItem.querySelector('img');
                 if (img && img.src) {
                 if (!img) return null;
                    // 缩略图URL推导出大图URL
               
                    // 缩略图URL格式: /images/thumb/f/ff/文件名/60px-文件名
                var src = img.src;
                    // 大图URL格式: /images/f/ff/文件名
                // MediaWiki缩略图URL格式:
                    var thumbSrc = img.src;
                // /images/thumb/a/ab/Filename.jpg/60px-Filename.jpg
                   
                // 需要转换为:
                    // 移除缩略图路径中的 /thumb/ 和尺寸前缀
                // /images/a/ab/Filename.jpg
                    var fullSrc = thumbSrc.replace(/\/thumb\//, '/');
               
                    fullSrc = fullSrc.replace(/\/\d+px-/, '/');
                // 方法1: 移除 /thumb/ 和 /寸px-文件名 部分
                    // 移除可能的缩略图参数
                var url = src.replace('/thumb/', '/');
                    fullSrc = fullSrc.replace(/\?.*$/, '');
                // 移除最后的 /数字px-文件名 部分
                   
                url = url.replace(/\/\d+px-[^\/]+$/, '');
                    return fullSrc;
                // 重新添加文件名
                 }
                var filename = src.split('/').pop().replace(/^\d+px-/, '');
                 return null;
                url = url + '/' + filename;
                  
                 return url;
             }
             }
              
              
第36行: 第38行:
                     e.stopPropagation();
                     e.stopPropagation();
                      
                      
                    // 如果已经是激活状态,不做任何事
                     if (this.classList.contains('active')) return;
                     if (this.classList.contains('active')) return;
                      
                      
                     var newImgUrl = getThumbImageUrl(this);
                     var newImgUrl = extractFullImageUrl(this);
                     if (!newImgUrl) {
                     if (!newImgUrl) {
                         console.warn('Cannot get image URL from thumbnail');
                         console.warn('Cannot extract image URL');
                         return;
                         return;
                     }
                     }
                      
                      
                     // 预加载新图片
                     // 保存容器当前内容
                     var preloadImg = new Image();
                     var currentHTML = container.innerHTML;
                    preloadImg.src = newImgUrl;
                      
                      
                     preloadImg.onload = function() {
                     // 尝试加载新图片
                         // 获取旧图片
                    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');
                         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) {
                         if (oldImg) {
                            oldImg.style.transition = 'opacity 0.2s ease';
                             oldImg.style.opacity = '0';
                             oldImg.style.opacity = '0';
                            oldImg.style.transition = 'opacity 0.15s ease';
                         }
                         }
                          
                          
                         // 替换图片
                         // 延迟替换
                         container.innerHTML = '';
                         setTimeout(function() {
                        container.appendChild(newImg);
                            container.innerHTML = newImgHTML;
                       
                            var newImg = container.querySelector('img');
                        // 淡入新图
                            if (newImg) {
                        requestAnimationFrame(function() {
                                newImg.style.opacity = '0';
                            requestAnimationFrame(function() {
                                requestAnimationFrame(function() {
                                newImg.style.opacity = '1';
                                    newImg.style.opacity = '1';
                            });
                                });
                         });
                            }
                         }, 150);
                          
                          
                         // 更新激活状态
                         // 更新激活状态
第84行: 第79行:
                     };
                     };
                      
                      
                     preloadImg.onerror = function() {
                     testImg.onerror = function() {
                         console.error('Failed to load image: ' + newImgUrl);
                         console.error('Cannot load: ' + newImgUrl);
                        // 尝试备用URL
                        var altUrl = newImgUrl.replace(/\/images\//, '/images/thumb/') + '/280px-' + newImgUrl.split('/').pop();
                        testImg.src = altUrl;
                     };
                     };
                   
                    testImg.src = newImgUrl;
                 });
                 });
             });
             });
第98行: 第98行:
     }
     }
      
      
    // 兼容 MediaWiki 动态加载
     if (window.mw && mw.hook) {
     if (window.mw && mw.hook) {
         mw.hook('wikipage.content').add(initSwitcher);
         mw.hook('wikipage.content').add(initSwitcher);

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