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

基于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>

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          }        }      });    });

via：http://www.w2bc.com/article/2015-09-27-jquery-fancybox

原标题：基于jQuery图片弹出层切换jquery.fancybox插件

关键词：jquery