Widget:GF立绘切换:修订间差异
来自OGAS数据中枢
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第11行: | 第11行: | ||
if (!container || thumbItems.length < 2) return; | if (!container || thumbItems.length < 2) return; | ||
// | // 直接从缩略图中提取完整的大图URL | ||
function | function extractFullImageUrl(thumbItem) { | ||
var img = thumbItem.querySelector(' | var img = thumbItem.querySelector('img'); | ||
if (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-/, ''); | |||
return | 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 = | var newImgUrl = extractFullImageUrl(this); | ||
if (!newImgUrl) { | if (!newImgUrl) { | ||
console.warn('Cannot | console.warn('Cannot extract image URL'); | ||
return; | return; | ||
} | } | ||
// | // 保存容器当前内容 | ||
var | 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'); | var oldImg = container.querySelector('img'); | ||
if (oldImg) { | if (oldImg) { | ||
oldImg.style.opacity = '0'; | oldImg.style.opacity = '0'; | ||
oldImg.style.transition = 'opacity 0.15s ease'; | |||
} | } | ||
// 替换 | // 延迟替换 | ||
container.innerHTML = | setTimeout(function() { | ||
container.innerHTML = newImgHTML; | |||
var newImg = container.querySelector('img'); | |||
if (newImg) { | |||
newImg.style.opacity = '0'; | |||
requestAnimationFrame(function() { | |||
newImg.style.opacity = '1'; | |||
}); | |||
}); | } | ||
}, 150); | |||
// 更新激活状态 | // 更新激活状态 | ||
| 第84行: | 第79行: | ||
}; | }; | ||
testImg.onerror = function() { | |||
console.error(' | 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行: | ||
} | } | ||
if (window.mw && mw.hook) { | if (window.mw && mw.hook) { | ||
mw.hook('wikipage.content').add(initSwitcher); | mw.hook('wikipage.content').add(initSwitcher); | ||