fancybox – Touch enabled and Responsive jQuery LightBox

fancybox

The FancyBox jQuery plugin creates a touch-enabled and responsive lightbox container for Videos, Images, Iframes and more. It is highly customizable and compatible with all modern browsers and 10+. The plugin itself requires at least jQuery Version 1.9.1+ or 2.0+, but the developers recommend to use jQuery 3.0+.

Download the latest version of fancybox as .ZIP or as .TAR package!

npm i @fancyapps/fancybox --save

yarn add @fancyapps/fancybox --save

bower install fancybox --save

Instructions

The package itself contains the main JavaScript file as well as the main Stylesheet. Both files are available in a normal AND in a minified version! It doesn’t need any images, because the shown icons are drawn by the script itself, using SVG.

 

Load fancybox

Embed the Stylesheet directly in the header of your HTML document. It’s recommended to link the jQuery library, as well as the FancyBox script itself, immediately after the opened <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/fancybox.css" />
    </head>
    <body>
        <!-- Required jQuery Library -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/fancybox.min.js"></script>
    </body>
</html>

 

Configure fancybox

I never saw such a confusing configurations and options-design, It’s really hard to look through it. So I’ll just list a few options for your below, but please visit the official documentation if you want to embed the FancyBox script in your website. Good Luck!

$.fancybox({
    closeExisting:          false,
    loop:                   false,
    gutter:                 50,
    keyboard:               true,
    preventCaptionOverlap:  true,
    arrows:                 true,
    infobar:                true,
    smallBtn:               "auto",
    toolbar:                "auto",
    buttons: [
        "zoom", "slideShow", "thumbs", "close"
    ],
    idleTime:               3,
    protect:                false,
    modal:                  false,
    defaultType:            "image", 
    animationEffect:        "zoom",
    animationDuration:      366,
    zoomOpacity:            "auto",
    transitionEffect:       "fade",
    transitionDuration:     366,
    sideClass:              "",
    baseClass:              "",
    parentEl:               "body",
    hideScrollbar:          true,
    autoFocus:              true,
    backFocus:              true,
    trapFocus:              true,
    
    //
    //  Please Visit the official documentation for more infos
    //  https://fancyapps.com/fancybox/3/docs/#options
    //
});

 

Configure: Options

closeExisting
Set this to false if you do not need to stack multiple instances.
loop
Enable infinite gallery navigation
gutter
Horizontal space between slides
keyboard
Enable keyboard navigation
preventCaptionOverlap
Should allow caption to overlap the content?
arrows
Should display navigation arrows at the screen edges
infobar
Should display counter at the top left corner
smallBtn
Should display close button (using `btnTpl.smallBtn` template) over the content. Can be true, false, “auto”. If “auto” – will be automatically enabled for “html”, “inline” or “ajax” items
toolbar
Should display toolbar (buttons at the top). Can be true, false, “auto”. If “auto” – will be automatically hidden if “smallBtn” is enabled.
buttons
What buttons should appear in the top right corner. Buttons will be created using templates from `btnTpl` option and they will be placed into toolbar (class=”fancybox-toolbar”` element).
idleTime
Detect “idle” time in seconds.
protect
Disable right-click and use simple image protection for images
model
Shortcut to make content “modal” – disable keyboard navigtion, hide buttons, etc.
defaultType
Default content type if cannot be detected automatically
animationEffect
Open/close animation type. Possible values: false (disable), “zoom” (zoom images from/to thumbnail), “fade”, “zoom-in-out”
animationDuration
Duration in ms for open/close animation
zoomOpacity
Should image change opacity while zooming. If opacity is “auto”, then opacity will be changed if image and thumbnail have different aspect ratios.
transitionEffect
Transition effect between slides. Possible values: false (disable), “fade”, “slide”, “circular”, “tube”, “zoom-in-out”, “rotate’
transitionDuration
Duration in ms for transition animation
sideClass
Custom CSS class for slide element
baseClass
Custom CSS class for base layout
parentEl
Container is injected into this element
hideScrollbar
Hide browser vertical scrollbars; use at your own risk
autoFocus
Try to focus on the first focusable element after opening
backFocus
Put focus back to active element after closing
trapFocus
Do not let user to focus on element outside modal content

Leave a Reply

Top