基于jQuery图片弹出层切换代码。这是一款基于jquery.fancybox.js插件实现的鼠标点击弹出幻灯片切换代码。在线预览 源码下载实现的代码。html代码:<div class="container"> < ...
基于jQuery图片弹出层切换代码。这是一款基于jquery.fancybox.js插件实现的鼠标点击弹出幻灯片切换代码。
在线预览 源码下载
实现的代码。
html代码:
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"> <a class="fancy" href="images/banner1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"> <img src='/images/loading.gif' data-original="images/banner1.jpg" /> </a> </div> <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"> <a class="fancy" href="images/banner2.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"> <img src='/images/loading.gif' data-original="images/banner2.jpg" /> </a> </div> <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"> <a class="fancy" href="images/banner1.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"> <img src='/images/loading.gif' data-original="images/banner1.jpg" /> </a> </div> <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"> <a class="fancy" href="images/banner2.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"> <img src='/images/loading.gif' data-original="images/banner2.jpg" /> </a> </div> </div> </div> <hr> <center><h3>缩略图样式</h3></center><br> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"> <a class="fancybox-thumbs" data-fancybox-group="thumb" href="images/banner1.jpg"> <img src='/images/loading.gif' data-original="images/banner1.jpg" /> </a> </div> <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"> <a class="fancybox-thumbs" data-fancybox-group="thumb" href="images/banner2.jpg"> <img src='/images/loading.gif' data-original="images/banner2.jpg" /> </a> </div> <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"> <a class="fancybox-thumbs" data-fancybox-group="thumb" href="images/banner1.jpg"> <img src='/images/loading.gif' data-original="images/banner1.jpg" /> </a> </div> <div class="col-xs-12 col-sm-4 col-md-3 fancybox img-responsive"> <a class="fancybox-thumbs" data-fancybox-group="thumb" href="images/banner2.jpg"> <img src='/images/loading.gif' data-original="images/banner2.jpg" /> </a> </div> </div> </div>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:基于jQuery图片弹出层切换jquery.fancybox插件
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。