【原创】Discuz门户文章实现图片增加alt标签并自动居中，点击图片放大，再次点击图片则恢复原样

样式地址：https://www.shiqingwu.com/article/1920.html
演示图片：

废话不多说，下面开始教程：
1、实现图片增加alt标签并自动居中教程请看这里：https://tuyuanma.com/news_7578_1_1
2、进入网站根目录——static——image——editor——复制一份editor_function.js文件并重命名为bgeditor_function.js打开文件搜索代码

function insertImage(image, url, width, height) {
url = typeof url == 'undefined' || url === null ? image : url;
width = typeof width == 'undefined' || width === null ? 0 : parseInt(width);
height = typeof height == 'undefined' || height === null ? 0 : parseInt(height);
var html = '<p><a href="' + url + '" target="_blank"><img src="'+image+'"'+(width?' width="'+width+'"':'')+(height?' height="'+height+'"':'')+'></a></p>';
edit_insert(html);
}

复制代码

修改为

游客，如果您要查看本帖隐藏内容请回复

3、进入网站根目录——template——当前使用模板——portal——view.htm或view_XXX.htm内容页，在文件底部插入JS及CSS样式

游客，如果您要查看本帖隐藏内容请回复

4、进入网站后台——工具——更新缓存
【特别说明：更改代码后，已经发布的图片需要要重新插入才能实现最终效果】

另一个无需修改源代码，只需在文章页插入一个div模块的方法，div代码如下：

游客，如果您要查看本帖隐藏内容请回复

插入到文章页即可
CSS样式

#article_content img[onclick="showModal(this)"] {pointer-events:auto!important;cursor:zoom-in!important;}
.modal {display:none;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.8);}
.modal-container {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;}
.modal-image {max-width:90%!important;max-height:90vh!important;cursor:zoom-out!important;display:inline-block;}

复制代码

JS代码（最好放置在footer的最底部）

游客，如果您要查看本帖隐藏内容请回复

新增优化（增加点击图片放大+多图可切换的功能）：
演示图：

CSS样式代码

游客，如果您要查看本帖隐藏内容请回复

JS代码

游客，如果您要查看本帖隐藏内容请回复

前端代码

游客，如果您要查看本帖隐藏内容请回复

完美配套教程
【原创】DZ门户文章每段文章自动空两格且图片自动居中

【原创】Discuz门户文章实现图片增加alt标签并自动居中，点击图片放大，再次点击图片则恢复原样-建站教程下载

【原创】Discuz门户文章实现图片增加alt标签并自动居中，点击图片放大，再次点击图片则恢复原样

相关帖子

教程 / CSS+DIV素材

【原创】判断分类信息中的数据是否为指定数据类型，并根据数据类180人阅读

【原创】要实现 Discuz! 程序中旧URL批量跳转到对应的新URL的方220人阅读

【原创】门户编辑器复制粘贴内容自动转化为纯文本格式，去除富媒300人阅读

【原创】将文章访问量转换为K的的显示样式，如将21302转换为21.3654人阅读

【原创】discuz论坛分类信息中，帖子发布页有多个图片上传功能，876人阅读

在线QQ头像-QQ邮箱头像-QQ空间头像查询工具在线查询工具源码免125人阅读

discuz侧边导航，支持浏览器上下滚动，菜单栏上下滑动，点击返回111人阅读

Discuz浮窗多图的DIY单页素材900人阅读

html5+css3的浮窗单图DIY模块978人阅读

html5+css3的横排导航列表DIY模块1092人阅读

所属版块

最佳新人

管理/版主

土豪装逼