<!-- 引入jQuery版本 -->
//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.0.min.js

<!-- 添加FancyBox核心文件 -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>

<a class="fancybox-effects-a" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
<a class="fancybox-effects-b" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
<a class="fancybox-effects-c" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
<a class="fancybox-effects-d" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>

// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
   helpers: {
       title : {
           type : 'outside'
       },
       overlay : {
           speedOut : 0
       }
   }
});

// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
   openEffect  : 'none',
   closeEffect    : 'none',
   helpers : {
       title : {
           type : 'over'
       }
   }
});

// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
   wrapCSS    : 'fancybox-custom',
   closeClick : true,
   openEffect : 'none',
   helpers : {
       title : {
           type : 'inside'
       },
       overlay : {
           css : {
               'background' : 'rgba(238,238,238,0.85)'
           }
       }
   }
});

// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
   padding: 0,
   openEffect : 'elastic',
   openSpeed  : 150,
   closeEffect : 'elastic',
   closeSpeed  : 150,
   closeClick : true,
   helpers : {
       overlay : null
   }
});