网页上用了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>
问题解决。