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

12/6/2015来源:Javascript教程人气:956

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

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