dz门户文章内容页实现点击图片放大功能

来自版块: Discuz教程发表于: 2020-1-17 15:15:54

22055

点击门户文章内容页的图片，是跳转到图片原地址，不知道有没有相应的设置或者代码实现点击图片放大原图大屏显示再点击恢复原状

首先，要引入jq库，我测试版本jQuery v2.0.0。
其次，这么写需要有防止$冲突的jq代码<script>jQuery.noConflict();</script>。
然后，再确定引入的zoomify.min.js路径是否正确。
帖子里的图片<img>标签是带一些参数的，门户没有。
可以利用网上的一些js来做类似效果。

!qinai!游客!yincang_youke!

html

<div class="show-content">
文章内容……
</div>

复制代码

内容区域容器是class="show-content"。
CSS

<style>.zoomify.zoomed{z-index:9999;position: relative;}.zoomify-shadow{background-color: rgb(0, 0, 0);opacity: 0.5;position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index:800;}</style>

复制代码

这个css是给图片和背景遮罩用的。
JQ

<script src="{$plugin_path}/static/js/zoomify.min.js"></script>
<script type="text/javascript">
jQuery('.show-content img').css('cursor','pointer');
jQuery('.show-content img').zoomify();
</script>

复制代码

jQuery是我的防止冲突改名，原本为$，{$plugin_path}是我的插件路径，换成自己的。

补充：
zoomify()本身有一些参数，比如放大开始，放大完成，缩小开始，缩小完成，每一步都可以添加一些效果，详情百度zoomify.min.js。

测试环境：Discuz! X3.4 utf-8，火狐浏览器61.0.1 (64 位)。

门户，文章，内容页，点击，图片，放大，功能