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

2026年5月15日 (五) 20:47的版本

(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;

           thumbItems.forEach(function(item) {
               item.addEventListener('click', function() {
                   if (this.classList.contains('active')) return;

                   // 直接从 data-fullsrc 读取 filepath: 生成的完整URL
                   var newSrc = this.dataset.fullsrc;
                   if (!newSrc) return;

                   // 淡出
                   var oldImg = container.querySelector('img, a img');
                   if (oldImg) {
                       oldImg.style.transition = 'opacity 0.15s ease';
                       oldImg.style.opacity = '0';
                   }

                   setTimeout(function() {
                       // 用 <img> 替换原先的wiki File语法渲染结果（<a><img></a>）
                       container.innerHTML = '<img src="' + newSrc + '" style="max-width:100%;max-height:420px;object-fit:contain;transition:opacity 0.3s ease;opacity:0;">';
                       var newImg = container.querySelector('img');
                       if (newImg) {
                           requestAnimationFrame(function() {
                               newImg.style.opacity = '1';
                           });
                       }
                   }, 150);

                   thumbItems.forEach(function(t) { t.classList.remove('active'); });
                   item.classList.add('active');
               });
           });
       });
   }

   if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initSwitcher);
   } else {
       initSwitcher();
   }

   if (window.mw && mw.hook) {
       mw.hook('wikipage.content').add(initSwitcher);
   }

})();

@@ 第1行： / 第1行： @@
-<includeonly><script>
 (function() {
      function initSwitcher() {
@@ 第5行： / 第4行： @@
              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) {
+                 item.addEventListener('click', function() {
-                    e.preventDefault();
-                    e.stopPropagation();
                      if (this.classList.contains('active')) return;
-                     var newImgUrl = extractFullImageUrl(this);
+                    // 直接从 data-fullsrc 读取 filepath: 生成的完整URL
-                     if (!newImgUrl) {
+                    var newSrc = this.dataset.fullsrc;
-                         console.warn('Cannot extract image URL');
+                    if (!newSrc) return;
-                         return;
+                     // 淡出
+                     var oldImg = container.querySelector('img, a img');
+                     if (oldImg) {
+                         oldImg.style.transition = 'opacity 0.15s ease';
+                         oldImg.style.opacity = '0';
                      }
-                    // 保存容器当前内容
+                     setTimeout(function() {
-                     var currentHTML = container.innerHTML;
+                         // 用 <img> 替换原先的wiki File语法渲染结果（<a><img></a>）
+                         container.innerHTML = '<img src="' + newSrc + '" style="max-width:100%;max-height:420px;object-fit:contain;transition:opacity 0.3s ease;opacity:0;">';
-                    // 尝试加载新图片
+                         var newImg = container.querySelector('img');
-                    var testImg = new Image();
+                         if (newImg) {
-                    testImg.onload = function() {
+                             requestAnimationFrame(function() {
-                         // 创建新图片并设置样式
+                                newImg.style.opacity = '1';
-                         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';
                          }
+                    }, 150);
-                        // 延迟替换
-                        setTimeout(function() {
+                    thumbItems.forEach(function(t) { t.classList.remove('active'); });
-                            container.innerHTML = newImgHTML;
+                    item.classList.add('active');
-                            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);
@@ 第97行： / 第48行： @@
          initSwitcher();
      }
      if (window.mw && mw.hook) {
          mw.hook('wikipage.content').add(initSwitcher);
      }
 })();
-</script></includeonly>