做项目,有时候查看图片要直接跳转到一个新的页面,在显示图片。这样用户体验效果不好。
采用该方法,直接在当前页面分层弹窗并显示图片,体验效果大大提升!
采用Magnific Popup – 响应式 jQuery Lightbox 插件,就可实现该功能。
html代码:
<a href="{$vo.img}" class="test-popup-link">查看图片</a>
js代码:
// 查看图片 $('.test-popup-link').magnificPopup({ type: 'image' });
文件引入:
<link rel="stylesheet" href="/merchant/css/magnific-popup.css"/>
<script type="text/javascript" src="/merchant/js/jquery.magnific-popup.min.js"></script>