日志
ChatGPT修复好了HDWIKI6.0打开词条图片不显示的问题
|
点击小图后显示出来的弹出窗口只显示img:加图片地址，不显示大图。要完全恢复打开后显示完整的大图，需要把openremoveimage.js全部修改一下：
function openremoveimage(E) {
var url = E.href;
var title = $(E).find('img').attr('alt') || $(E).find('img').attr('title') || '图片预览';
// 检查是否图片链接
if (!url.match(/\.(jpg|jpeg|png|gif)$/i)) return true;
// 先清理旧弹窗
$('#image-viewer-overlay').remove();
// 预加载图片
var img = new Image();
img.onload = function () {
var imgWidth = img.width;
var imgHeight = img.height;
// 计算最大显示尺寸（浏览器视口减去边距）
var maxWidth = window.innerWidth - 80;
var maxHeight = window.innerHeight - 80;
// 比例缩放
var scale = Math.min(maxWidth / imgWidth, maxHeight / imgHeight, 1);
var displayWidth = imgWidth * scale;
var displayHeight = imgHeight * scale;
// 创建遮罩和弹窗容器
var $overlay = $(`
<div id="image-viewer-overlay" style="
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6); z-index: 9999;
display: flex; justify-content: center; align-items: center;
">
<div style="
position: relative; background: #fff; padding: 10px;
box-shadow: 0 0 10px #000; border-radius: 6px;
">
<img src="${url}" style="width: ${displayWidth}px; height: ${displayHeight}px;" />
<div style="text-align: center; margin-top: 8px; font-weight: bold;">${title}</div>
<span id="image-viewer-close" style="
position: absolute; top: -10px; right: -10px;
background: #f00; color: #fff; border-radius: 50%;
width: 24px; height: 24px; text-align: center; line-height: 24px;
font-weight: bold; cursor: pointer;">×</span>
</div>
</div>
`);
$('body').append($overlay);
$('#image-viewer-close, #image-viewer-overlay').on('click', function (e) {
if (e.target.id === 'image-viewer-overlay' || e.target.id === 'image-viewer-close') {
$('#image-viewer-overlay').remove();
}
});
};
img.src = url;
return false;
}
$(document).ready(function () {
$('img').each(function () {
var $img = $(this);
var src = $img.attr('src');
if (!src) return;
var $a = $img.parent('a');
if ($a.length === 1) {
$a.off('click').on('click', function () {
return openremoveimage(this);
});
}
});
});
