Fancy Box 3 - Lightbox Cho Tất Cả Template Blogspot

Fancy Box 3 - Lightbox Cho Tất Cả Template Blogspot

Demo : Nhấn vào hình bên dưới để xem hiệu ứng Lightbox

1. Chèn Code sau trước thẻ </head> 

<!-- Lightbox NK -->
<link href='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js'/>
<!-- END CODE Lightbox NK -->
2. Chèn Code sau trước thẻ </body> 

<!-- Script Lightbox NK -->
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function(){
   /**************************
   This part makes sure we select only the images and photos that is supposed to appear in a lightbox
   **************************/
   $(".post-body a img").each(function(){
     var isImage = /\.(?:jpg|jpeg|gif|png)$/i.test( $(this).parent("a").attr("href") );
    
     if ( isImage ) {
       $(this).parent("a").attr('data-src', $(this).parent("a").attr("href"));
       $(this).parent("a").attr('data-fancybox', 'postLightBox' );
     }
    
     else {
       // .. do nothing
     }
   });
  
  
   /**************************
   This part initializes FancyBox on the qualifying images
   **************************/
   var options = {
       infobar  : true,
       buttons  : true,
       speed    : 300,  // Animation duration in ms
      margin : [40, 20] // Space around image, ignored if zoomed-in or viewport smaller than 800px
   };
  
   $("[data-fancybox]").fancybox( options );
 });
//]]> 
</script>
<!-- END CODE Script Lightbox NK -->
Bài viết này có hữu ích không ?!