Discuz模板|Discuz插件|Discuz教程|Discuz素材免费下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

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

[复制链接]
tuyuanma 发表于 2020-1-17 15:15:54 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


点击门户文章内容页的图片,是跳转到图片原地址,不知道有没有相应的设置或者代码实现点击图片放大原图  大屏显示  再点击恢复原状9 |9 h# }0 m  Z. a, s; q( G
# S: b- `" u: k9 Y% [
首先,要引入jq库,我测试版本jQuery v2.0.0。
0 `0 C+ m3 p$ p2 P, w4 h1 J% `其次,这么写需要有防止$冲突的jq代码<script>jQuery.noConflict();</script>。
2 k( U+ @7 k4 t1 m然后,再确定引入的zoomify.min.js路径是否正确。" q3 A: G2 H+ B2 h* b8 e
帖子里的图片<img>标签是带一些参数的,门户没有。( O. O' W1 K0 c: Z# G
可以利用网上的一些js来做类似效果。
4 O+ V3 e: y- a0 \9 W4 X) U. L
游客,如果您要查看本帖隐藏内容请回复
HTML
  1. <div class="show-content">" u8 F8 S3 m: w0 c
  2. 文章内容……
    / }$ U- o: |1 R1 c  Z
  3. </div>
复制代码
内容区域容器是class="show-content"。2 P" k5 v8 t; \7 m/ x) O
CSS
  1. <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是给图片和背景遮罩用的。
2 ?% _/ [2 F/ a+ k0 ]2 aJQ
  1. <script src="{$plugin_path}/static/js/zoomify.min.js"></script>7 d0 Y1 u4 d" F  r' h8 i
  2. <script type="text/javascript">
    ; _& F) |5 J" ?9 e7 U, ~, t2 f
  3.   jQuery('.show-content img').css('cursor','pointer');  k1 N, |' l2 n2 }
  4.   jQuery('.show-content img').zoomify();4 _1 y3 E; D: s6 G* O( t' Q( J
  5. </script>
复制代码
jQuery是我的防止冲突改名,原本为$,{$plugin_path}是我的插件路径,换成自己的。
& U. W9 x4 l9 d8 O' i* U9 C  e0 q. f- z* @6 @8 `  C
补充:. _  Q5 t8 e9 J1 x$ v- C! b1 F& I
zoomify()本身有一些参数,比如放大开始,放大完成,缩小开始,缩小完成,每一步都可以添加一些效果,详情百度zoomify.min.js。+ K8 e, h  |) g/ |  D0 @
9 t# S+ I3 e3 a5 ^" N' A
测试环境:discuz! X3.4 utf-8,火狐浏览器61.0.1 (64 位)。

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告

兔源码网 (公网安备36112102000036号 赣ICP备17001544号)

兔源码 QQ交流群:493651246  GMT+8, 2020-2-23 17:44
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表