fancybox弹出显示关闭后原网页图片消失问题
web jQuery 2020-11-07 70 0
关于本站

淘淘IT

记录工作学习中的点点滴滴

本站创建于2017年,用于记录工作和学习中遇到的问题。同时,不断提升网站的使用体验,增加新的功能。

918004 1287 12
最新评论
感谢大佬解决了我的问题
评 留言
11111111111111111111ewqr :ku:
评 留言
@xiaoniba 好像是编码GBK和utf-8的区别,请看下我摘抄的一篇文章,里面有介绍http://taotaoit.com/article/details/885.html,你可以尝试下是否可以
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
\x7f-\xff 这个匹配什么东东,会不会出现安全问题??? 改成这样如何 if ($strict && !preg_match('/^[\w\.\*\x{4e00}-\x{9fa5}]+$/u', $key)) {
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
完美解决 牛逼
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
文章标签更多
ThinkPHP (124)
Mysql (28)
DedeCms (30)
jQuery (28)
证件照 (1)
setInc (3)
setDec (3)
onclick (3)
打开边栏(ESC) 关闭边栏(ESC)

jquery.fancybox图片放大回不去了


网页上用了fancybox来显示图片:

1.首先是css,添加:
<link rel="stylesheet" type="text/css" href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" />
2.JavaScript方面:注意要加migrate.min.js,否则会出现“页面报错Cannot read property ‘msie’ of undefined”
<script type="text/javascript" src="../../assets/global/plugins/jquery.min.js"></script>
<script type="text/javascript" src="../../assets/global/plugins/jquery-migrate.min.js"></script>
<script type="text/javascript" src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
3.然后页面html控件:
<a href="../../assets/admin/pages/media/works/img1.jpg"> 
<img
    class="fancybox-button"
    data-rel="fancybox-button"
    class="img-responsive"
    src="../../assets/admin/pages/media/works/img1.jpg" alt="">
</a>
运行起来,结果发现点了图片出现fancybox弹出框,点击关闭后,原页面上的图片也消失了!
经过摸索,发现是上面蓝色的class和data-rel这两个属性,应该放在<a>里才行,如下:
<a href="../../assets/admin/pages/media/works/img1.jpg" class="fancybox-button" data-rel="fancybox-button"> 
<img
    class="img-responsive"
    src="../../assets/admin/pages/media/works/img1.jpg" alt="">
</a>

问题解决。


自己用的代码与上面有点区别

<img src="image/051522419pgq.jpg" alt="" data-fancybox="group" data-caption="服务贸易展区">

改为

<a href="image/051522419pgq.jpg" data-fancybox="group" data-caption="服务贸易展区">
                            <img src="image/051522419pgq.jpg" alt="" >
                            </a>
问题解决

版权声明:本篇文章来源于网络。 来源链接

相关推荐
jquery出现Uncaught TypeError: $(...).prop is not a function问题
jQuery | 2019-08-23 1767
做全选功能的时候用到 var xz = $(this).prop("checked"); 提示: Uncaught TypeError: $(...).prop is not a function 应该是jquery版本过低造成的,更换高版本成功解决问题, jquery下载地址 http://www...
jQuery中将数组转换成字符串join()和push()使用
jQuery | 2018-09-13 1586
1、push()将元素依次添加至数组; 2、join()将数组转换成字符串,里面可以带参数分隔符,默认【,】 <script src="jquery.min.js"></script> <script> $(document).on('click','.sure',function...
评论:0条
评论加载中...
发表评论