图片展示工具widget

一键安装/更新

从来源站点安装

快速安装说明

点击页面图片会进入图片的展示页面，这个展示页面可缩放图片（最大300%）、拖拽图片以及图片展示的翻页功能

使用说明

本工具分为widget版和使用ResourceLoader版的调用方式（下面的两种调用方式任选其一）

ResourceLoader版本：需要将MediaWiki:imageshowtools.js的相关代码放至您管理的WIKI的mediawiki:imagesshowtools.js的页面里
widget版本：请在页面任意位置调用本widget。

【注意】实际在使用时，"{{ResourceLoader|imagesshowtools.js}}或{{#Widget:图片展示工具}}"只用调用1次即可，无需重复调用。

webp格式图片

本工具支持Webp格式图片的渲染及展示，webp图片的调用格式为： [[File:XXX.webp|class=showOnImg|link=]] （不带这个class的webp图片也会自动渲染进“弹窗展示模式”）

ResourceLoader版

示例

弹窗展示模式

{{ResourceLoader|imagesshowtools.js}}
[[File:999.jpg |class=showOnImg|link=]]
[[File:Test.png |class=showOnImg|link=]]

图片查看器模式（支持Webp）

{{ResourceLoader|imagesshowtools.js}}
<div class="ImageViewer" id="Imageshowtools">
[[File:999.jpg|link=]]
[[File:Test.png|link=]]
</div>

图片单独展示模式

{{ResourceLoader|imagesshowtools.js}}
[[File:999.jpg|class=showOnImgOL|link=]]

Widget版

示例

弹窗展示模式

[[File:999.jpg |class=showOnImg|link=]]
[[File:Test.png |class=showOnImg|link=]]
{{#Widget:图片展示工具}}

图片查看器模式（支持Webp）

{{#Widget:图片展示工具}}
<div class="ImageViewer" id="Imageshowtools">
[[File:999.jpg|link=]]
[[File:Test.png|link=]]
</div>

图片单独展示模式

{{#Widget:图片展示工具}}
[[File:999.jpg|class=showOnImgOL|link=]]

更新日志

2.3.2 新增下载文件名称使用wiki文件名称进行下载；新增“图片查看器模式”图片的拖拽功能。
2.3.1 修复了overflow绑定到html标签的问题
2.3 修复进入“弹窗展示模式”没有禁止滚动的BUG；修复“弹窗展示模式”在PC端图片放大的情况无法拖拽图片的BUG；去除图片强制150px渲染的相关功能；修复"图片查看器模式"在调用时必须填class的BUG；修复两个模式下点击“下载”按钮无法触发下载的问题；优化“图片查看器模式”的UI界面；新增“图片查看器模式”的双击图片放大功能；新增图片单独展示模式。
2.2 修复了ES5的兼容问题，去除了默认CSS带得蓝色背景及边框，新增图片查看器模式
2.1.1 修复了在ios移动端加载多张图片时「预览图」样式显示异常的问题，修复了未使用当前WIKI站点API的问题
2.1 新增支持webp格式图片的渲染及展示，以及修复了按「重置」按钮无法复原图片初始角度的BUG
2.0 新增图片「左旋转」、「右旋转」、「下载」功能，以及修复了分页标签事件丢失以及图片拖拽的相关BUG
1.5 新增ResourceLoader版的调用方式，以及修复了一些鼠标触碰的样式
1.0 本项目创建

图片展示工具widget

WIKI功能

使用说明

webp格式图片

ResourceLoader版

示例

弹窗展示模式

图片查看器模式（支持Webp）

图片单独展示模式

Widget版

示例

弹窗展示模式

图片查看器模式（支持Webp）

图片单独展示模式

更新日志

目录