MaxShowBox 图片最大化查看器

全局单例：window.MaxShowBox（已预实例化，直接调用）

🖥️ PC 端使用指南

基础：显示指定图片

// 直接显示某张图片
window.MaxShowBox.Add_Img($('img#target'));

进阶：键盘快捷键扩展

通过 4 个钩子函数 自定义行为：

// 1. 按小键盘 + 时，获取当前要显示的图片
window.MaxShowBox.ShowImgByKey = function() {
    return $('.gallery-item.active img');  // 返回 jQuery 图片对象
};

// 2. 小键盘 1 - 上一张
window.MaxShowBox.PrevImg = function() {
    const prev = $('.gallery-item.active').prev().find('img');
    if (prev.length) {
        prev.closest('.gallery-item').addClass('active').siblings().removeClass('active');
        return prev;
    }
    return null;  // 返回 null 表示没有上一张
};

// 3. 小键盘 3 - 下一张  
window.MaxShowBox.NextImg = function() {
    const next = $('.gallery-item.active').next().find('img');
    if (next.length) {
        next.closest('.gallery-item').addClass('active').siblings().removeClass('active');
        return next;
    }
    return null;
};

// 4. 小键盘 Del - 下载
window.MaxShowBox.Download = function() {
    const src = $('.max-show-box img').attr('src');
    GM_download(src, 'image.jpg');  // 需要 @grant GM_download
};

PC 专属特性

交互	行为
`NumpadAdd` / `+`	触发 `ShowImgByKey()` 并打开
`Numpad1`	触发 `PrevImg()` 并切换图片
`Numpad3`	触发 `NextImg()` 并切换图片
`NumpadDecimal`	触发 `Download()`
`+` / `-`	放大/缩小当前图片
`鼠标移动`	智能跟随定位
`滚轮`	关闭查看器

📱 移动端使用指南

零配置，自动启用

脚本自动检测触摸设备，为所有图片添加悬浮按钮：

// 无需手动调用，但可通过以下方式控制：

// 暂停自动添加按钮（临时禁用）
window.MaxShowBox.StopAutoRun();

移动专属特性

交互	行为
图片右下角 B 按钮	点击放大该图片
双指捏合	浏览器原生缩放
单击	关闭查看器

⚠️ 重要：禁止以下操作

错误操作	后果	正确做法
`new MaxShowBox()`	重复实例化，事件绑定混乱	直接使用 `window.MaxShowBox`
手动调用 `StartAutoRun()`	事件重复绑定，按键触发多次	脚本已自动调用，无需干预
重写 `Add_Img`	破坏核心功能	使用钩子函数 `ShowImgByKey` 等

🎯 完整示例：PC 画廊 + 移动端自适应

// 放在 @require 加载之后，页面 ready 时执行
$(function() {
    
    // ===== 仅 PC 端：配置键盘导航 =====
    if ($(window).width() > 768) {
        
        // 当前画廊状态
        let currentIndex = 0;
        const $items = $('.gallery-item');
        
        // 告诉 MaxShowBox 当前该显示哪张
        window.MaxShowBox.ShowImgByKey = function() {
            return $items.eq(currentIndex).find('img');
        };
        
        // 上一张（支持循环）
        window.MaxShowBox.PrevImg = function() {
            currentIndex = (currentIndex - 1 + $items.length) % $items.length;
            return $items.eq(currentIndex).find('img');
        };
        
        // 下一张（支持循环 + 预加载）
        window.MaxShowBox.NextImg = function() {
            currentIndex = (currentIndex + 1) % $items.length;
            
            // 预加载后 2 张
            for (let i = 1; i <= 2; i++) {
                const $img = $items.eq((currentIndex + i) % $items.length).find('img');
                if ($img.length) new Image().src = $img[0].src;
            }
            
            return $items.eq(currentIndex).find('img');
        };
        
        // 自定义下载命名
        window.MaxShowBox.Download = function() {
            const src = $('.max-show-box img').attr('src');
            const name = `Gallery_${currentIndex + 1}_${Date.now()}.jpg`;
            GM_download(src, name);
        };
    }
    
    // ===== 移动端：无需配置，自动生效 =====
    // 如需排除某些图片：
    // window.MaxShowBox.StopAutoRun();
    
});

🔌 API 速查

方法	平台	说明
`Add_Img(img)`	通用	直接显示指定 jQuery 图片对象
`ShowImgByKey()`	PC	钩子：按 `+` 时调用，返回要显示的图片
`PrevImg()`	PC	钩子：按 `1` 时调用，返回上一张图片
`NextImg()`	PC	钩子：按 `3` 时调用，返回下一张图片
`Download()`	PC	钩子：按 `Del` 时调用，执行下载逻辑
`StopAutoRun()`	移动	停止自动添加悬浮按钮
`StartAutoRun()`	移动	恢复自动添加（防重复）

💡 设计原则

单例约束：强制 window.MaxShowBox，杜绝多实例
平台隔离：PC 走键盘逻辑，移动走触摸逻辑，互不干扰
事件保护：StartAutoRun 内部标记已初始化，重复调用无效
渐进增强：不配置钩子也能用，配置了更强大

Loading…

MaxShowBox 图片最大化查看器

全局单例：window.MaxShowBox（已预实例化，直接调用）

🖥️ PC 端使用指南

基础：显示指定图片

// 直接显示某张图片
window.MaxShowBox.Add_Img($('img#target'));

进阶：键盘快捷键扩展

通过 4 个钩子函数 自定义行为：

// 1. 按小键盘 + 时，获取当前要显示的图片
window.MaxShowBox.ShowImgByKey = function() {
    return $('.gallery-item.active img');  // 返回 jQuery 图片对象
};

// 2. 小键盘 1 - 上一张
window.MaxShowBox.PrevImg = function() {
    const prev = $('.gallery-item.active').prev().find('img');
    if (prev.length) {
        prev.closest('.gallery-item').addClass('active').siblings().removeClass('active');
        return prev;
    }
    return null;  // 返回 null 表示没有上一张
};

// 3. 小键盘 3 - 下一张  
window.MaxShowBox.NextImg = function() {
    const next = $('.gallery-item.active').next().find('img');
    if (next.length) {
        next.closest('.gallery-item').addClass('active').siblings().removeClass('active');
        return next;
    }
    return null;
};

// 4. 小键盘 Del - 下载
window.MaxShowBox.Download = function() {
    const src = $('.max-show-box img').attr('src');
    GM_download(src, 'image.jpg');  // 需要 @grant GM_download
};

PC 专属特性

交互	行为
`NumpadAdd` / `+`	触发 `ShowImgByKey()` 并打开
`Numpad1`	触发 `PrevImg()` 并切换图片
`Numpad3`	触发 `NextImg()` 并切换图片
`NumpadDecimal`	触发 `Download()`
`+` / `-`	放大/缩小当前图片
`鼠标移动`	智能跟随定位
`滚轮`	关闭查看器

📱 移动端使用指南

零配置，自动启用

脚本自动检测触摸设备，为所有图片添加悬浮按钮：

// 无需手动调用，但可通过以下方式控制：

// 暂停自动添加按钮（临时禁用）
window.MaxShowBox.StopAutoRun();

移动专属特性

交互	行为
图片右下角 B 按钮	点击放大该图片
双指捏合	浏览器原生缩放
单击	关闭查看器

⚠️ 重要：禁止以下操作

错误操作	后果	正确做法
`new MaxShowBox()`	重复实例化，事件绑定混乱	直接使用 `window.MaxShowBox`
手动调用 `StartAutoRun()`	事件重复绑定，按键触发多次	脚本已自动调用，无需干预
重写 `Add_Img`	破坏核心功能	使用钩子函数 `ShowImgByKey` 等

🎯 完整示例：PC 画廊 + 移动端自适应

// 放在 @require 加载之后，页面 ready 时执行
$(function() {
    
    // ===== 仅 PC 端：配置键盘导航 =====
    if ($(window).width() > 768) {
        
        // 当前画廊状态
        let currentIndex = 0;
        const $items = $('.gallery-item');
        
        // 告诉 MaxShowBox 当前该显示哪张
        window.MaxShowBox.ShowImgByKey = function() {
            return $items.eq(currentIndex).find('img');
        };
        
        // 上一张（支持循环）
        window.MaxShowBox.PrevImg = function() {
            currentIndex = (currentIndex - 1 + $items.length) % $items.length;
            return $items.eq(currentIndex).find('img');
        };
        
        // 下一张（支持循环 + 预加载）
        window.MaxShowBox.NextImg = function() {
            currentIndex = (currentIndex + 1) % $items.length;
            
            // 预加载后 2 张
            for (let i = 1; i <= 2; i++) {
                const $img = $items.eq((currentIndex + i) % $items.length).find('img');
                if ($img.length) new Image().src = $img[0].src;
            }
            
            return $items.eq(currentIndex).find('img');
        };
        
        // 自定义下载命名
        window.MaxShowBox.Download = function() {
            const src = $('.max-show-box img').attr('src');
            const name = `Gallery_${currentIndex + 1}_${Date.now()}.jpg`;
            GM_download(src, name);
        };
    }
    
    // ===== 移动端：无需配置，自动生效 =====
    // 如需排除某些图片：
    // window.MaxShowBox.StopAutoRun();
    
});

🔌 API 速查

方法	平台	说明
`Add_Img(img)`	通用	直接显示指定 jQuery 图片对象
`ShowImgByKey()`	PC	钩子：按 `+` 时调用，返回要显示的图片
`PrevImg()`	PC	钩子：按 `1` 时调用，返回上一张图片
`NextImg()`	PC	钩子：按 `3` 时调用，返回下一张图片
`Download()`	PC	钩子：按 `Del` 时调用，执行下载逻辑
`StopAutoRun()`	移动	停止自动添加悬浮按钮
`StartAutoRun()`	移动	恢复自动添加（防重复）

💡 设计原则

单例约束：强制 window.MaxShowBox，杜绝多实例
平台隔离：PC 走键盘逻辑，移动走触摸逻辑，互不干扰
事件保护：StartAutoRun 内部标记已初始化，重复调用无效
渐进增强：不配置钩子也能用，配置了更强大