Responsive jQuery Lightbox With Amazing CSS3 Effects - Fancy Box 3

Responsive jQuery Lightbox With Amazing CSS3 Effects - Fancy Box 3

Fancy Box 3 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.

$(document).ready(function() {
$('.fancybox').fancybox();
});

5. All default options and callback functions.

// Animation duration in ms
speed : 330,
// Enable infinite gallery navigation
loop : true,
// Should zoom animation change opacity, too
// If opacity is 'auto', then fade-out if image and thumbnail have different aspect ratios
opacity : 'auto',
// Space around image, ignored if zoomed-in or viewport smaller than 800px
margin : [44, 0],
// Horizontal space between slides
gutter : 30,
// Should display toolbars
infobar : true,
buttons : true,
// What buttons should appear in the toolbar
slideShow  : true,
fullScreen : true,
thumbs     : true,
closeBtn   : true,
// Should apply small close button at top right corner of the content
// If 'auto' - will be set for content having type 'html', 'inline' or 'ajax'
smallBtn : 'auto',
image : {
    // Wait for images to load before displaying
    // Requires predefined image dimensions
    // If 'auto' - will zoom in thumbnail if 'width' and 'height' attributes are found
    preload : "auto",
    // Protect an image from downloading by right-click
    protect : false
},
ajax : {
    // Object containing settings for ajax request
    settings : {
        // This helps to indicate that request comes from the modal
        // Feel free to change naming
        data : {
            fancybox : true
        }
    }
},
iframe : {
    // Iframe template
    tpl : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',
    // Preload iframe before displaying it
    // This allows to calculate iframe content width and height
    // (note: Due to "Same Origin Policy", you can't get cross domain data).
    preload : true,
    // Scrolling attribute for iframe tag
    scrolling : 'no',
    // Custom CSS styling for iframe wrapping element
    css : {}
},
// Custom CSS class for layout
baseClass : '',
// Custom CSS class for slide element
slideClass : '',
// Base template for layout
baseTpl : '<div class="fancybox-container" role="dialog" tabindex="-1">' +
        '<div class="fancybox-bg"></div>' +
        '<div class="fancybox-controls">' +
            '<div class="fancybox-infobar">' +
                '<button data-fancybox-previous class="fancybox-button fancybox-button--left" title="Previous"></button>' +
                '<div class="fancybox-infobar__body">' +
                    '<span class="js-fancybox-index"></span>&nbsp;/&nbsp;<span class="js-fancybox-count"></span>' +
                '</div>' +
                '<button data-fancybox-next class="fancybox-button fancybox-button--right" title="Next"></button>' +
            '</div>' +
            '<div class="fancybox-buttons">' +
                '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="Close (Esc)"></button>' +
            '</div>' +
        '</div>' +
        '<div class="fancybox-slider-wrap">' +
            '<div class="fancybox-slider"></div>' +
        '</div>' +
        '<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' +
    '</div>',
// Loading indicator template
spinnerTpl : '<div class="fancybox-loading"></div>',
// Error message template
errorTpl : '<div class="fancybox-error"><p>The requested content cannot be loaded. <br /> Please try again later.<p></div>',
// This will be appended to html content, if "smallBtn" option is not set to false
closeTpl : '<button data-fancybox-close class="fancybox-close-small">×</button>',
// Container is injected into this element
parentEl : 'body',
// Enable gestures (tap, zoom, pan and pinch)
touch : true,
// Enable keyboard navigation
keyboard : true,
// Try to focus on first focusable element after opening
focus : true,
// Close when clicked outside of the content
closeClickOutside : true,
// Callbacks
beforeLoad   : $.noop,
afterLoad    : $.noop,
beforeMove   : $.noop,
afterMove    : $.noop,
onComplete   : $.noop,
onInit       : $.noop,
beforeClose  : $.noop,
afterClose   : $.noop,
onActivate   : $.noop,
onDeactivate : $.noop

Change logs:

2017-11-07

  • New `Share` module; Some layout/CSS changes; bugfixes

2017-10-04

  • Bugfix

2017-09-29

  • Collection of tweaks

2017-09-02

  • Fix rounding; sometimes image zoomed from 2nd click
  • Supports Google Maps search links

2017-09-01

  • Fixed: backFocus option was not working

2017-06-08

  • Change all animations to CSS transitions; bugfixes + code tweaks

2017-03-15

  • It is now possible start in full-screen

2017-03-13

  • Reorganize hash module to allow disabling it

2017-03-12

  • Make hash work using jQuery prior v3

2017-03-11

  • Tweak hash module to allow specialchars

2017-03-10

  • Hash module; improve displaying html content on mobile
  • Make "hash" work when using manually

2017-03-07

  • Improve swiping a bit

2017-03-06

  • "beforeClose" callback now can be used to prevent closing

2017-03-03

  • Fix typo that broke focusing on the first focusable element
  • Removed scrolling page to original place after closing modal

2017-03-02

  • Quick for issues if "speed:0"

2017-03-01

  • Stop slideshow on click event

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

  • Publication date: 07.11.2017
  • Source

©Copyright, 2021. Copying information from this website is only possible with my acceptance.