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

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

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

关键词：jquery