模板:图片放大

此模板为一键安装导入，不建议手动修改。

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

模板

简单说明

版本：1.1

说明：点击图片可放大，兼容手机端阅读

使用说明

※注意：目前的模板写法不可换行 ※注意：手机端可能体验不佳

{{图片放大|图片名称（png格式）|默认大小（可选/默认200px）|放大后大小（可选/默认400px）|默认文字=默认文字（选填）|放大文字=放大文字（选填）}}

示例

{{图片放大|Test|200px|800px|默认文字=我是默认文字|放大文字=我是放大文字}}

文件:Test.png

我是默认文字

文件:Test.png

我是放大文字

MediaWiki:Amplification

作者

congeal_plume

+关注

标签

标签：模板

依赖页面

• 模板:JS
• 模板:ResourceLoader
• 模板:图片放大
• mediawiki:Amplification.js

<div class="resourceLoader" style="display:none" data-is-module="false" data-mime="" >MediaWiki:{{{1}}}</div>

<div class="resourceLoader" style="display:none" data-is-module="false" data-mime="" ></div>

<div class="showOnBox"><div class="showOn" style="width:200px"> [[file:.png|200px|link=|class=showOnImgSource]]<div></div></div> <div class="showOnImg" style="top:0; left:0;">[[file:.png|class=showOnImgBox|400px|link=]]<div class="showOnText" style="width:"></div></div></div>

$(function() { var isCloned = false; // 用于跟踪是否已经克隆过 $(".showOn").click(function() { if (!isCloned) { // 检查是否已经克隆过 var showElement = $(this).next(".showOnImg").clone(); $("body").append(showElement); isCloned = true; // 设置为已克隆 showElement.css({visibility:"visible", opacity: 1}) .click(function() { $(this).remove(); isCloned = false; // 删除后重置为未克隆 }); } }); });

更新日志

1.0

1.1 By Lu 精简语法，修复bug（宽度为auto时表现不一致；多个连写时首个图片后换行）。测试页面：图片放大测试