Responsive jQuery Lightbox With Amazing CSS3 Effects - Fancy Box 2

Responsive jQuery Lightbox With Amazing CSS3 Effects - Fancy Box 2
File Size: 445KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Fancy Box 2 is a jQuery lightbox plugin that is completely rewritten from Fancybox, a Mac Style lightbox plugin, with new features and updated graphics.

Features:

  • Responsive design
  • Integrated slideshow
  • Amazing CSS3 effects: shadows, round corners, atransitions, etc
  • A lot of options to customize your lightbox
  • Supports mousewheel and keyboard navigation
  • Supports almost all the html elements: DIV, text, swf, Ajax content, iframe,etc, not only images.
  • Cross-browser. Support all major browsers such as IE7/8/9/10, Chrome, firefox, safari, opera, etc.

Basic Usage:

1. Include necessary javascript files on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>

2. Include jQuery mousewheel plugin for mouse wheel support (optional)

<script type="text/javascript" src="jquery.mousewheel.js"></script>

3. Create a group of images

<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title=""><img src="1_s.jpg" alt="" /></a> 
<a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title=""><img src="2_s.jpg" alt="" /></a> 
<a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title=""><img src="3_s.jpg" alt="" /></a> 
<a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title=""><img src="4_s.jpg" alt="" /></a> 

4. Call the plugin and you'll be done.

<script type="text/javascript">
$(document).ready(function() {

$('.fancybox').fancybox();

});
</script>

This awesome jQuery plugin is developed by fancyapps. For more Advanced Usages, please check the demo page or visit the official website.