基于jQuery图片弹出层切换jquery.fancybox插件

2024-04-27 15:02:18

字体：大中小

来源：转载

供稿：网友

基于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/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/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/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/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/banner1.jpg" alt="" />               </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/banner2.jpg" alt="" />               </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/banner1.jpg" alt="" />               </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/banner2.jpg" alt="" />               </a>           </div>       </div>   </div>

js代码：

$(document).ready(function () {           $('.fancy').fancybox();           $('.fancybox-thumbs').fancybox({               PRevEffect: 'none',               nextEffect: 'none',                closeBtn: false,               arrows: false,               nextClick: true,                helpers: {                   thumbs: {                       width: 50,                       height: 50                   }               }           });       });