jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

Overview

fancyBox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

See the project page for documentation and a demonstration.

Follow @thefancyapps for updates.

Quick start

1. Add latest jQuery and fancyBox files

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<link  href="/path/to/jquery.fancybox.min.css" rel="stylesheet">
<script src="/path/to/jquery.fancybox.min.js"></script>

2. Create links

<a data-fancybox="gallery" href="big_1.jpg">
    <img src="small_1.jpg">
</a>

<a data-fancybox="gallery" href="big_2.jpg">
    <img src="small_2.jpg">
</a>

3. Enjoy!

License

fancyBox is licensed under the GPLv3 license for all open source applications. A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).

Read more about fancyBox license.

Bugs and feature requests

If you find a bug, please report it here on Github.

Guidelines for bug reports:

  1. Use the GitHub issue search — check if the issue has already been reported.
  2. Check if the issue has been fixed — try to reproduce it using the latest master or development branch in the repository.
  3. Isolate the problem — create a reduced test case and a live example. You can use CodePen to fork any demo found on documentation to use it as a template.

A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report.

Feature requests are welcome. Please look for existing ones and use GitHub's "reactions" feature to vote.

Please do not use the issue tracker for personal support requests - use Stack Overflow (fancybox-3 tag) instead.

Comments
  • Preview of v3

    Preview of v3

    Hi,

    You can take a look at upcoming fancyBox3 here - http://fancyapps.com/fancybox/3/

    Putting the finishing touches right now and later will start working on homepage and documentation. There will be a lot to cover as the script has changed completely (for example, it is possible to show more than one modal at a time).

    Thanks!

    opened by fancyapps 226
  • Feedback on the 3.1 preview

    Feedback on the 3.1 preview

    Hey!

    3.1 looks awesome! Maybe you know about some of these things already but if not, here are some messages I get:

    "SecurityError (DOM Exception 18): Attempt to use history.replaceState() more than 100 times per 30.000000 seconds" (This is in Safari and I used the arrows to navigate like 15 times, not 100)

    "TypeError: undefined is not an object (evaluating 'i.current.$content.has')" (might be because of the error above)

    "TypeError: a is not an Object. (evaluating '"length"in a')" when trying to open a gallery with buttons set to true. No message and it opens when it's set to false.

    opened by seabasss 41
  • Problem compiling into sass

    Problem compiling into sass

    I get this when importing and compiling into sass/scss:

    Libsass: Error: "env(safe-area-inset-right)" is not a number for `max' on line 485

    And above all, when a sass version of the styles?

    opened by stratboy 36
  • Safari overlay flicker bug?

    Safari overlay flicker bug?

    I'm using the latest version of fancybox for a photo gallery. When viewing in Safari 5.1.1 there is a very quick flash of background content where the overlay disappears. It happens when the first image has just finished opening, and then again when clicking between gallery items (flash shows just after animation completes).

    Can't see the problem in Firefox, or Chrome.

    In IE (testing in 7) Fancybox doesn't initiate at all. Links go directly to the large images.

    Example: http://benekdesign.com/clients/findaband/profile.html

    Click on any of the artist images at top to open slideshow.

    opened by beneklisefski 36
  • Iphone, Ipad or touch swipe possible?

    Iphone, Ipad or touch swipe possible?

    Would it be tricky to have swipe functions on iPhone, iPad or other touch devices? I don't know if this is something that can be added on the side of Fancybox (triggering prev/next)? Any tips on this would be appreciated.

    Thanks

    opened by o-l-e 34
  • Fancybox shifts absolute/fixed positioned elements

    Fancybox shifts absolute/fixed positioned elements

    Page elements that are positioned to the right either with position: absolute; or position: fixed; will shift to the right when a Fancybox opens. Possible fix: add the right-margin that is applied to the body to such elements as well.

    Example: http://jsfiddle.net/hkDnQ/

    opened by collideous 33
  • fancyBox adding css to my page body

    fancyBox adding css to my page body

    It seems unnecessary and was not in 2.0.6.

    fancyBox 2.1.0 adds 'style="margin-right: 17px;"' to my page body when I open an overlay. Everytime I open the overlay, my page in the background squeezes to the left because of the added margin.

    I believe it's supposed to be the calculated width of my scrollbar.

    opened by gavsiu 28
  • How to set autoSize and autoWidth in fancybox 3?

    How to set autoSize and autoWidth in fancybox 3?

    Hello

    We have set below code in old fancybox, But i need to use in fancybox 3, So how can use/ set autoSize and autoWidth in fancybox 3.

    Please give me advice

    autoSize: false,
    autoWidth : false,
    
    

    Thank you, PressLayouts.

    opened by presslayouts 25
  • update() scrolls to top of page

    update() scrolls to top of page

    I have a long list of items in my fancybox that you can scroll through. Some elements are hidden but when selecting an option they are shown. This then requires fancy box to re-size and re-position center using update() but after the update the page scrolls to the top and loses the current position.

    Is there a way to prevent this?

    Thanks!

    opened by Gapz 23
  • Close does not work in Chrome

    Close does not work in Chrome

    Click on close-button does not work in current Chrome 23.0.1271.64, click on the overlay works fine. Even the fancy-app examples don`t work, so you can test it there. I tried to replace the href attribute value with "#" which will close the box but the overlay is still visible.

    opened by Hasenpriester 23
  • Slideshow only moves forward one slide

    Slideshow only moves forward one slide

    Here are the steps to produce the behavior:

    1. Visit http://www.rentvillas.com/PropertyPhotos.aspx?Catalog=14428
    2. Click on any of the photos to see fancybox.
    3. Click play.
    4. Slideshow progresses one slide then no longer progresses

    Here is the fancybox initialization from common.js

               $.fancybox(items, {
                    'padding': 0,
                    'nextEffect': 'fade',
                    'prevEffect': 'fade',
                    'openSpeed': 'normal',
                    'closeSpeed': 'fast',
                    'playSpeed': 2000,
                    'index': indexClicked,
                    'type': 'image',
                    'helpers': {
                        title: { type: 'outside' },
                        buttons: {},
                        thumbs: { width: 100, height: 70 }
                    },
                    'afterShow': function () {
                        $(".fancybox-outer").bind("contextmenu", function (e) {
                            return false;
                        });
                        $(".fancybox-wrap").addClass("addthis_shareable");
                        addthis.update('config', 'services_overlay', 'facebook,twitter,email,print,more');
                    }
                });
    
    opened by kevinp 21
  • how to add class after fancybox-container?

    how to add class after fancybox-container?

    I want to add a class after div.fancybox-container for example: fancybox-photo-viewer-mh <div class="fancybox-container fancybox-photo-viewer-mh fancybox-show-toolbar fancybox-show-caption fancybox-show-nav fancybox-is-open fancybox-is-zoomable fancybox-can-zoomIn" role="dialog" tabindex="-1" id="fancybox-container-2" style="transition-duration: 366ms;"> I used the .addclass method but it didn't work. Can anyone help me!

    opened by hondatron90 1
  • Fancybox Not Opening pics on Safari

    Fancybox Not Opening pics on Safari

    Describe the bug Some users are reporting that pics will not load when using Safari. The get they "Content could not be loaded, please try again later" message. It does not seem to affect all. Safari on my ipad works fine. On my phone I get the error.

    To Reproduce Steps to reproduce the behavior:

    1. Go to www.scifikitbash.com
    2. Click on any images

    Expected behavior Should load images

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: seems to be limited to iOS
    • Browser: Safari and possible Chrome on iOS

    Smartphone (please complete the following information): -ipad and iphone Pro models

    Additional context Add any other context about the problem here.

    Thank you!

    opened by jcoffman99 2
  • FancyApp Carousel plugin Sync expect a hardcode classname

    FancyApp Carousel plugin Sync expect a hardcode classname

    Description Carousel__slide uses the hardcode of slide classes at the same time, providing classNames: {}, but the content of 'slide' is ignored unless equal to .carousel__slide.

    A demo is available here: https://codepen.io/Axeofblood/pen/oNyXZBa If the thumbnail item doesn't have the .carousel__slide class, the click event will be ignored in Sync

    To Reproduce Steps to reproduce the behavior:

    1. Create Carousel
    2. Change class for slides
    3. Try click on thumbnails
    4. See

    Expected behavior Changing the class has no effect on click behavior

    opened by wterh 1
  • Image flickering when zooming in iOS Safari

    Image flickering when zooming in iOS Safari

    When I zoom image on Safari iOS it flickers. Here is the screen recording: https://share.icloud.com/photos/074ZiUa3CYHq-9gRaW2oABKIw

    I am aware this is an old version of plugin and it won’t get any update. I was wondering if there is any workaround/fix that I can use to prevent flickering?

    opened by justsanjit 0
  • Drag image to to folder

    Drag image to to folder

    Hi there,

    is it possible to drag the image from the modal view directly to a folder ( in this case windows ) ?

    In lightbox, which was used in an older redmine-plugin this downloaded the src image in full size. The newer plugin uses fancybox, where this does not work, or just handles the touch gestures.

    i was able to disable touch gestures, but i cant drag the image to folder...

    Thanks in advance !

    opened by erSitzt 0
Releases(v3.5.7)
  • v3.5.7(Mar 11, 2019)

  • v3.5.6(Dec 14, 2018)

  • v3.5.5(Dec 13, 2018)

  • v3.5.4(Dec 12, 2018)

  • v3.5.3(Dec 10, 2018)

    Fixes

    • Fixed #2122 - Focusable HTML5 video
    • Fixed #2128 - Missing smallBtn on mobile
    • Fixed #2096 - autoStart fullscreen AND slideshow
    • Fixed #2097 - German translation
    • Fixed #2132 - Youtube fullscreen

    Improvements

    • Captions now have linear-gradient background (instead of background image for pseudo element) and can have max-height and vertical scrollbar;
    • Improved design for phones having the notch (https://webkit.org/blog/7929/designing-websites-for-iphone-x/)
    Source code(tar.gz)
    Source code(zip)
  • v3.5.2(Oct 5, 2018)

    Fixes

    • Fixed #2090 - Html5 video in looping gallery;
    • Fixed issue with wrong height of PDF files (by automatically disabling iframe preloading)
    Source code(tar.gz)
    Source code(zip)
  • v3.5.1(Sep 30, 2018)

  • v3.5.0(Sep 29, 2018)

    Improvements

    • New option preventCaptionOverlap (enabled by default for desktop only) prevents caption from overlapping the content;
    • HTML5 video now uses thumbnail image as poster;
    • Redesigned caption - centered, without top border and does not hide when idling (and preventCaptionOverlap is enabled);
    • It is now easier to set content height in % (especially for iframes), there is no need to adjust bottom margin and max-height (caused by this - https://bugzilla.mozilla.org/show_bug.cgi?id=748518), because bottom margin is applied automatically using JS)

    Fixes

    • Fixed thumbnail visibility detection (now works better with sliders);
    • Fixed share modal not closing when clicking outside content area;
    • Fixed iframe support for iOS

    Note about upgrading from previous versions

    If you have changed the layout (as in this example: https://codepen.io/fancyapps/full/pxovaa), you most likely have to set preventCaptionOverlap : false to prevent content shifting.

    Source code(tar.gz)
    Source code(zip)
  • v3.4.2(Sep 21, 2018)

    Improvements

    • Updated slideshow
      • Slideshow now waits for YouTube and Vimeo video to end
      • Slideshow now has a progressbar
    • After YouTube or Vimeo video ends, gallery will automatically move to the next slide
    • Revised transitions

    Changes

    • Slideshow button is now displayed by default
    • Slightly updated visuals
      • Tweaked loading icon
      • changed background color of thumbnails list; border color of active element

    Fixes

    • Fixed IE11 issues
      • Transitions not working on some zoom levels
      • Updated scrollbar width detection should fix page shifting
    • Fixed issue with unwanted characters inside thumbnail list
    • Fixed issue when sometimes iframe height is not calculated correctly
    Source code(tar.gz)
    Source code(zip)
  • v3.4.1(Aug 31, 2018)

    Improvements

    • Revised focus trapping
    • Navigation arrows are now buttons
    • Slideshow now waits for html5 video to end
    • Changed window.jQuery to global value

    Fixes

    • Fixed issue with 2inline items in looping group
    • Fixed issue with custom full-screen button
    Source code(tar.gz)
    Source code(zip)
  • v3.4.0(Aug 29, 2018)

    Changes

    • Data attributes data-trigger and data-index are renamed to data-fancybox-trigger and data-fancybox-index to avoid conflicts with Bootstrap
    • Initializing with selector option will group all items into one
    • videoFormat option is replaced by new video option ( video : {tpl : "..", format : "", autoStart : true}) and it is now possible to change html5 video template and to enable/disable autoplay
    • autoFocus option now has default value true
    • Youtube videos now uses youtube-nocookie.com domain
    • Redesigned SVG icons

    New

    • New option closeExisting can be used to close any previously opened instances before opening new one
    • New callback onSlideShowChange is triggered when slideshow starts/stops

    Improvements This release is mostly focused on bug fixes. There are some performance improvements; improved user experience while using tab for navigating the page

    Source code(tar.gz)
    Source code(zip)
  • v3.3.5(Apr 12, 2018)

  • v3.3.4(Apr 9, 2018)

  • v3.3.3(Apr 9, 2018)

  • v3.3.2(Apr 9, 2018)

  • v3.3.1(Apr 5, 2018)

  • v3.3.0(Apr 3, 2018)

    • New feature - trigger elements; it is now possible to have multiple links having the same target, see the last example here - https://codepen.io/fancyapps/pen/VyLOJX?editors=1000
    • Default toolbar buttons are now zoom/thumbs/close to make interface cleaner;
    • Improved video (mp4) support - you can now link directly or display hidden <video> element;
    • Videos (mp4 and YouTube/Vimeo, too) now keep aspect ratio;
    • All icons are now created using SVG and navigation arrows have a simpler structure to make them easier to style;
    • createGroup method used to create the group is renamed to addContent and now can be used to populate the group;
    • Removed margin option; use padding for .fancybox-slide element instead;
    • Caption now uses one div element (dropped fancybox-caption-wrap element) and pseudo element for the background gradient;
    • Dropped support for MetaCafe, Dailymotion and Vine
    • The code is now standartized and formatted using prettier.io
    • Bugfixes
    Source code(tar.gz)
    Source code(zip)
  • v3.2.5(Nov 17, 2017)

    • Thumbnails now can have horizontal scrolling (axis option)
    • Improved zoom animation
    • Zoom icon is now included, but disabled by default
    • Bugfixes
    Source code(tar.gz)
    Source code(zip)
  • v3.2.1(Nov 11, 2017)

    • New options: defaultType : 'image' - Default content type if cannot be detected automatically thumbs.parentEl : '.fancybox-container' - Selector for element where thumbnails grid will be injected
    • Option margin now has default value 0 for mobile devices
    • Container is now placed at the bottom of the
    • Thumbnail list should now scroll properly when autoStart is enabled
    • Share module uses current page link if hash module is not disabled
    • Bugfixes
    Source code(tar.gz)
    Source code(zip)
  • v3.2.0(Nov 6, 2017)

    • New "Share" module (and button; you can use buttons option to customize what buttons to display)
    • Layout/CSS changes: - new inline SVG icons (there is also a download button available, hidden by default) and arrows; - infobar now shows only counter, enabled by default; - iOS hack to fix input focus issue.
    • Bugfixes
    Source code(tar.gz)
    Source code(zip)
  • v3.1.25(Sep 19, 2017)

  • v3.1.20(Jun 8, 2017)

    • It is now possible to disable or customize open/close/transition animations

    • fancyBox is now multilingual, you can set language using lang option and add new language using i18n

    • Changed default content type from "iframe" to "image" to avoid typical confusion when using links like image.php?id=123 without specifying content type; this means that you have to set data-type="iframe" for your iframe links;

    • Simplified manual calling, it now works without using opts option (similarly to v2) for example: $.fancybox.open({src: '<div><h1>Hello!</h1></div>', type: 'html', beforeShow: function(){ console.info('It works!'); }});

    • New option protect - disables right click for any content type, replaces "image.protect" option

    • New option mobile - collection of options that will override current settings when mobile device is detected

    • New option idleTime - customize or disable idle time

    • Option closeTpl is now replaced by btnTpl.smallBtn

    • Removed option closeClickOutside

    • New options clickContent, clickSlide, clickOutside to handle click events (possible values: "close", "next", "nextOrClose", "toggleControls", "zoom", false or function)

    • Unified module option naming; "thumbs", "fullScreen" and "slideShow" now have autoStart option that replaces previously used showOnStart / requestOnStart options.

    • Slideshow now uses Page Visibility API to pause slideshow when window is not active

    • Option selector (used to filer ajax content) is renamed to filter;

    • You can pass option selector to use event delegation instead of directly attaching click event to selected elements; example: $().fancybox({ selector : '[data-fancybox="images"]', loop : true });

    • $.fancybox.isTouch is renamed to isMobile

    • Callbacks "beforeMove/afterMove/onComplete" are replaced by "beforeShow/afterShow"

    • Improved scrollbar hiding, works better with other modals

    • Improved hash module, it now works better when pressing back button

    Source code(tar.gz)
    Source code(zip)
  • v3.0.47(Mar 14, 2017)

  • 3.0.39(Mar 6, 2017)

  • V2.1.7(Feb 28, 2017)

A customizable, modular, responsive, lightbox gallery plugin.

lightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery. Demo JQuery lightGallery demo. Codepen demo Main features Fully

Sachin N 5.6k Jan 4, 2023
Light and responsive lightbox script with focus on performance.

Magnific Popup Repository Fast, light and responsive lightbox plugin, for jQuery and Zepto.js. Documentation and getting started guide. Examples and p

Dmitry Semenov 11.3k Jan 2, 2023
A light-weight, customizable lightbox plugin for jQuery

About Colorbox: A customizable lightbox plugin for jQuery. See the project page for documentation and a demonstration, and the FAQ for solutions and e

Jack Moore 4.8k Dec 29, 2022
Touch-friendly image lightbox for mobile and desktop

Touch-friendly image lightbox for mobile and desktop

Andre Rinas 938 Jan 5, 2023
:zap: Simple and easy to use lightbox script written in pure JavaScript

baguetteBox.js Simple and easy to use lightbox script written in pure JavaScript. Demo page Table of contents Features Installation Importing Usage Cu

Marek Grzybek 2.3k Jan 3, 2023
THE original Lightbox script (v2).

Lightbox2 The original lightbox script. Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup a

Lokesh Dhakar 5.8k Jan 3, 2023
A touchable jQuery lightbox

Swipebox A touchable jQuery lightbox. View project page What is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Feat

null 2k Dec 6, 2022
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

jBox jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. Demo: https://stephanwagner.

Stephan Wagner 1.4k Dec 15, 2022
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Note: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 mo

Jordan Schroter 5k Dec 28, 2022
Elegant, responsive, flexible and lightweight modal plugin with jQuery.

iziModal Elegant, responsive, flexible and lightweight modal plugin with jQuery. izimodal.marcelodolza.com Fast Responsive Animated Lightweight Custom

Marcelo Dolza 2.1k Dec 30, 2022
A Lightweight Responsive jQuery Tooltip Plugin

tipso A Lightweight Responsive jQuery Tooltip Plugin There is also a Wordpress version of this plugin. Get it here Getting started Include jQuery <scr

Bojan Petkovski 325 Dec 21, 2022
jQuery PopBox UI Element

jQuery PopBox jQuery PopBox is a simple balloon UI element inspired by 37Signals Highrise CRM. See it in action here: http://gristmill.github.com/jque

Gristmill 427 Sep 24, 2022
Avgrund is jQuery plugin with new modal concept for popups

Avgrund Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page. It works in all modern b

Dmitri Voronianski 1.8k Dec 14, 2022
The simplest possible modal for jQuery

A simple & lightweight method of displaying modal windows with jQuery. For quick examples and demos, head to jquerymodal.com. Why another modal plugin

Kyle Fox 2.5k Dec 29, 2022
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Jan 5, 2023
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Apr 1, 2021
Simple to use modal / alert / dialog / popup. Created with vanilla JS. No javascript knowledge required! Works on every browser and device! IE9

EinsModal The last modal / alert / dialog you will ever need! Full Documentation: https://www.einscms.com/modal EinsModal is the best solution to inte

EinsCMS 30 Oct 20, 2022
A simple vanilla and lightweight modal which is easy to expand

A simple vanilla and lightweight modal which is easy to expand

null 1 Jul 3, 2022
Responsive, CSS3, touch-enabled jQuery Coverflow plugin.

jQuery.Flipster Flipster is a CSS3 3D transform-based jQuery plugin built to replicate the familiar 'cover flow' effect, but also supports a variety o

Adrien Delessert 704 Dec 28, 2022