fancyapps / fancybox

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

Archived

This repository has been archived and is now part of https://github.com/fancyapps/ui

Fancybox

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

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.

fancybox's Issues

What about the licence ?

Hi,

fancyapps.com down (dns ?),

What about the licence of fancybox ?

Thanks,
remrem.

Issue with a link within a TD with a class assigned

I have a table with images in it. I am trying to open these images with Fancybox, but have determined that when the TD has a class assigned, it prevents Fancybox from working. I appreciate any ideas. Thank you.

Link Code:

CSS assigned to TD:

.ss_leftside {
height: 140px;
vertical-align:top;
border: black;
border-width: 1px;
}

Gallery won't fire up from a link

Image gallery manual call isn't working in new version.. Is there a new API for that?

FancyBox not opening in IE9

At first I thought it was just my site but it's not working on the FancyBox demos either.

IE9 console reports the following on FancyBox.net

LOG: DivX HiQ Debug: HiQ supported site definition updated 129586 Minutes(s) ago.
LOG: DivX HiQ Debug: Updating...
SCRIPT65535: Invalid calling object
script block (5), line 72 character 4

appendChildOriginal(element);

Looks like it's a conflict with IE9's built in DIVX HTML5 plugin

Chaining is broken

Before 2.0 it was possible to do

Now it is not. If this is by design I think it should be stated in docs in red because it can break scripts on upgrade (was my case).

Simply adding

at the end of $.fn.fancybox looks to solve the issue.

This usage of the rel attribute is html5 invalid

I would prefer to use the data- attribute like data-fancybox-group="GROUPID" and for older browsers / older html versions a config in the fancybox options fancybox({useRel: true})

The background overlay also darkens the picture box

In chrome the background overlay also darkens the picture box so the whole screen is dark for me, it is chrome version 15.0.874.121 on Mac OSX 10.6.8, i do want to add i am using it part of an extension, i don't know if that would make a difference cause it works fine but that one thing

SlideShow Icon Fails

Greetings, nice Plugin!

With 2.0;

Initiating the play sequence on a gallery works great the images cycle as expected.
The play flag gets stuck though and subsequent galleries (via ajax calls) do not play.
Also sometimes clicking on an thumbnail to trigger fancybox displays the correct image and then instantly moves to the next image.

Also it is not possible to set closeBtn: false without setting arrows as well.

Great plugin.

iPad needs Two Clicks to advance slide (with standard buttons)

Greetings,

The new FancyBox has implemented the button helpers at the top and the left/right buttons respond to a single click.

Can an option be implemented to make the standard buttons (in the left and right area of the image) respond to a single click as well?

On tablets (Ipad) to navigate to the prev/next image requires TWO clicks.
The first click displays the arrow, the second click triggers the load/display of the next image.

Scrollbar issue when fancybox is used to display a very tall image.

When fancybox is used to display a very tall image, you will briefly see a vertical scroll bar. It is caused by the update function in the overlay helper. Below is my HTML code. Try to use a very tall image and you will see the scroll bar.

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  <link rel="stylesheet" href="jquery.fancybox.css?v=2.0.1" type="text/css" media="screen" />
  <script type="text/javascript" src="jquery.fancybox.js?v=2.0.1"></script>
</head>
<body>
  <a class="fancybox" href="test.jpg">Open Fancybox</a>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".fancybox").fancybox();
    });
  </script>
</body>
</html>

Problems with forms widgets

When show a form with inputs, checkbox and other elements using fancybox, the arrow keys (left, right) and the backspace button are blocked. Looking into the code, in the line 378 i found an if statement that ignores the key events in form elements, why ?

The partial solution has been comment out this block of code.

Testing in: Firefox 8.0, Chrome 15 and Safari 5.1

Callsback are commented out ?

Any reason why in the latest commit the callsback are commented out ?

/* // Callbacks onCancel: $.noop, // If canceling beforeLoad: $.noop, // Before loading afterLoad: $.noop, // After loading beforeShow: $.noop, // Before changing in current item afterShow: $.noop, // After opening beforeClose: $.noop, // Before closing afterClose: $.noop // After closing */

Can't customize title in beforeShow callback

The internal title helper runs after triggering the beforeShow callback. This prevents implementing advanced title generation logic as part of the beforeShow callback (and doing so afterShow causes the generated modal to wiggle due to height changes)

I think the right thing to do is to run the internal title helper prior to triggering the beforeShow callback.

Helpers documentation request

It`s not very comfy to search the examply page to find out what parameters can be passed to helpers.
Also there is no a word about openEasing / closeEasing / nextEasing / prevEasing. What values I should pass them?

Specifying Type as iframe in Options Script Area Breaks Code

note: FancyBox version 2.0.0 bug (non-existant in 1.3.4)

I have found that if you specify the "type" as iframe within the options script area (as shown below), the requested iframe location is redirected to the current directory /(null)

For this example, we'll say that the site is located at example.com/index.php

$(document).ready(function() {
    $("#more").fancybox({
        'width'         : 400,
        'height'        : 1000,
        'autoSize'      : false,
        'type'          : 'iframe'
    });
});

<a href="http://www.example.com/more/index.php" id="more">More</a>

Then a fancybox will open up that shows a iframe displaying the content (404 page) from example.com/(null)

This problem doesn't exist if you make the following changes:

$(document).ready(function() {
    $("#more").fancybox({
        'width'         : 400,
        'height'        : 1000,
        'autoSize'      : false,
    });
});

<a href="http://www.example.com/more/index.php" id="more" class="fancybox.iframe">More</a>

I don't like this class solution as I then can't add a different class that I could manipulate differently using css.

I haven't tried specifying other types eg image, ect.

---

Also on a side note, is it possible to not display the title in the fancy box? (setting to false or '' doesn't seem to work)

Other than this smallest bug, love version 2, great work! Thanks.

Loading animation

Why it became gif with non-soft corners and no opacity?
Some kind of downgrade...

Where is the "modal" option?

Hello everybody.

The "modal" option has been removed?
I need to disable the click outside to close.
How do this in the 2.0 version?

Fancy box is duplicating the image

When I click on the images in my gallery Fancybox duplicates the image and opens one on top of another, two images.

Has anyone else experienced this?

Thanks

Interpretation of commercial clause?

Hi!

Can I use Fancybox in a WordPress theme which I sell to my client? In other words, when am I supposed to pay for the thing?

Thanks.

Override button template

I have this piece of code.
Everything works except the buttons helper template.
Is this the correct way to do it?

$(document).ready(function() {
    $(".photogalleryLightbox li a").fancybox({
        nextEffect: 'elastic', // elastic, fade or none. default: elastic
        prevEffect: 'elastic',
        closeBtn: false,
        closeClick: false,
        tpl: {
            closeBtn: '<div title="Close" class="fancybox-item fancybox-close linkedImage"></div>',
            next: '<a title="Next" class="fancybox-item fancybox-next linkedImage"><span></span></a>',
            prev: '<a title="Previous" class="fancybox-item fancybox-prev linkedImage"><span></span></a>'
        },
        helpers:
        { 
            title: {
                type: 'outside' // float, inside, outside
            },
            overlay: {
                speedIn: 0,
                speedOut: 0,
                opacity: 0.85,
                css: {
                    cursor: 'pointer',
                    'background-color': 'rgba(0, 0, 0, 0.85)' //Browsers who don`t support rgba will fall back to default color value defined at CSS file
                },
                closeClick: true
            },
            buttons : {
                tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev linkedImage" title="Previous" href="javascript:$.fancybox.prev();">Previous</a></li><li><a class="btnPlay linkedImage" title="Slideshow" href="javascript:$.fancybox.play();;">Play</a></li><li><a class="btnNext linkedImage" title="Next" href="javascript:$.fancybox.next();">Next</a></li><li><a class="btnToggle linkedImage" title="Toggle size" href="javascript:$.fancybox.toggle();">Toggle</a></li><li><a class="btnClose linkedImage" title="Close" href="javascript:$.fancybox.close();">Close</a></li></ul></div>'
            }
        },
        beforeShow: function()
        {
            // Get rich titles
            var currentElement = this.element;
            var next = $(currentElement).next();
            if(next.length && next.hasClass('caption')) this.title = next.html();
            //var currentIndex = this.index;
        }
    });
});

jquery no.conflict() doesn't work

my bad it does work.

Additional callback methods

I want to use fancybox and ajax to display inline HTML. I want to implement cache and manipulate the content before an item is displayed. How about adding a callback that is called before a gallery item is displayed?

Thanks.

Navigation Bar too small for mobile devices

The navigation bar buttons helper are too small in size for mobile devices as iOS and android devices and are not zoomable.

Href argument not overriding original link

At its very simplest, my script has this html and js:

a href="image1.jpg" class="fancybox"

$(".fancybox").fancybox({
href : 'image2.jpg'
});

Still, image1.jpg is loaded into the fancybox when clicking the link. Seems like the href argument isn't working at all?
(Using fancybox 2.0.3)

Feature: fixed page scroll and scrolling inside a fancybox overlay

You can see this feature on Facebook when viewing a photo.
All you have to do it's set body overflow:hidden and wrap #fancybox-wrap into position:fixed block with overflow:scroll
It`s a cool thing when you have large (larger then page content) ajax or inline content

Option Keys Fails when content is any form element

The orignal code is like that:

if ($.inArray(e.target.tagName.toLowerCase, ['input', 'textarea', 'select', 'button']) > -1) {return;}

The function "e.target.tagName.toLowerCase" must be written like this: "e.target.tagName.toLowerCase()"
Otherwise the form element content can not be editable.

iframe scrolling on iOS device

When I try the iframe example at http://fancyapps.com/fancybox/#examples on an iPad, I can't get the content to scroll (using one, two, or more fingers). Do you know why this is?

If videos are part of a Fancybox gallery, the next/prev button hotspots cover the video's play button.

Hey there,

On my site, i'd like to have a gallery made up of images AND videos (hosted on youtube/vimeo and loaded up through an iframe).
For images, the gallery function works great - but for videos the NEXT/PREV nav buttons hotspots end up covering the video's play button.

In the past, I fixed this by changing some of fancybox's code to make it so that anytime an iframe is launched, the css of .fancybox-prev and .fancybox-next width attribute is changed to be 35px, instead of the usual 40% - keeping the hotspots narrower and on the sides of the video.

I'm trying to figure out how to alter the code in 2.0.3, but having difficulty... maybe it would be a good feature?

Ajax issue

I have the ff code but it doen't work. This should be an Ajax.

Choose from the map

<script> jQuery(document).ready(function(){ jQuery("#showMap").fancybox( maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); }); </script>

The error in Chrome: (Line 17 on jquery.fancybox.pack.js)
Uncaught TypeError: Object /NorgesKart.shtml has no method 'show'

Firebug error: (Line 17 on jquery.fancybox.pack.js)
d.content.show is not a function
error source line: [Break On This Error] a.trigger("beforeShow"),a._setDimensio...iv>').appendTo(e("body")).append(b),

Additional callback methods

I would like to have a callback method before fancybox jumps to a gallery item. This callback method can be used for validation. if the callback returns false, fancybox will stay on the current item.

Thanks!

Calling iFrame Broken

Hi,

I've spent a few hours trying but can't seem to call an iFrame Fancybox mid-script in 2.0.

The following call works perfectly with 1.3.4 but breaks in 2.0:
$.fancybox( {href : 'blah.php', type : 'iframe'} );

I've tried rejigging the syntax based on the new documentation but nothing seems to work for me.
It works fine when I trigger a fancybox from a link, but I need to call one in a script.

Any ideas?

Thanks.

thumbnail helper not compatible with jQuery.noConflict(); !!

links look like this:
javascript:$.fancybox.jumpto(0);

instead of this:
javascript:jQuery.fancybox.jumpto(0);

vertical position is incorrect on ios for long pages

Hi there,

I'm trying out fancybox and I am having an issue for ios devices (tested on my ipad2 and iphone 3GS) ... browser specific obviously.

On a long vertical page, the popup box is always positioned as in the viewport was showing the top of the page. Meaning if I am way down the page, I can see the semi-transparent black overlay over everything upon click, but I actually have to scroll back all the way up the page to see the popup box.

This was tested using fancybox 2.0.3 .

On the desktop, I've tested chrome and FF, on linux and osx and had no problem.

Thanks,
Tim.

IE8, Fancybox 2.0.2 Issue

I'm having problems with the latest version of fancybox 2.0.2 and am wondering if any of you gents (or gals) can help me.

When closing an iframe (YouTube) fancybox window on IE8 with the "closeEasing: easeInBack" option enabled, it doesn't close properly and the youtube video that is called up using fancybox gets blown up to fill the browser window. The only way to get back to the original page is to refresh the browser.

Here's the link: http://kamehamehapublishing.org/kumukahi/

I'm wondering what it could be?

Thanks in advance.

Any <button> or <input> element closes lightbox on click

Using the ajax method. Here's the sample code for the target page

<button onclick="return false">Do nothing</button>

Obviously clicking on the button should do nothing. Instead, it closes the lightbox. Frustrating when you're using the button to submit a form or something.

Adding a click event handler to the elements with event.preventDefault(); return false; avoids it, however in my case I want the button to submit its form, with a submit() handler on the form catching it and submitting via ajax.

I don't think the issue is necessarily within fancyBox, however it manifests itself here in a way I've never noticed before.

Callback isn't works?

I'm trying to use the "afterLoad" Callback, but isn't works. Check it:

    $.fancybox({
        href: '#tour'
        ,type: 'inline'
        ,width: 850
        ,height: 450
        ,afterLoad: function() {
            console.log('OK');
        }
    });

Fancybox thumbnail helper using $ in inline javascript

We use prototype and jQuery on the same page and for reasons we wrap everything in anonymous functions and pass in jQuery as a parameter. eg (function($){ $.fancybox(); })(jQuery); or jQuery(function($){ });

The problem is the thumbnailer outputs a link tag with inline javascript: href="javascript: $.fancybox.jumpto(idx)"

I think it would be better and safer to either wrap it or just change it to jQuery.fancybox.jumpto(idx);

Thanks!

Possibility to manipulate the title with a function as it could be done in 1.3.4

That would be awsome!

Wrong width and height of one image

I upgraded from 1.3.4 where all worked fine. On 2.0.3 one image has set wrong width and height, rest is fine. Correct image size is 756x105px, fancyBox sets it to 1296x180px. Tried with different options such as autoSize, fitToView, aspectRatio.

Tested on Opera 11.60, Firefox 8, Chrome 15 and IE9 (Windows 7 platform) with latest jQuery 1.7.1.

To reproduce bug enter http://weeb.pl and open SEO Friendly Forum Title's image.

P.S. Thanks for really nice plugin :-)

Navigation shortcuts

Alt-LeftArrow and Alt-RightArrow should not navigate within gallery as they are common shortcuts for history navigation in many browsers.

image title in class metadata (ok in 2.0 not in 2.0.1)

Hi there,

As i needed very looong html formatted titles, and just din't want to use the href title attribute to hold them (mainly cause it's not that xhtml 1.0 strict), i got a workaround that was perfect for my usage :

Grabbed jquery metadata plugin and got it on the page :
script type="text/javascript" src="inc/jquery.metadata.js"

No change made in the fancybox settings :

<script type="text/javascript"> $(document).ready(function() { $("a.fancy").fancybox({ fitToView : true, openEffect : 'elastic', openSpeed : '800', closeEffect : 'elastic', closeSpeed : '300', closeClick : false, helpers : { title : { type : 'inside' }, overlay : { opacity : 0.8, css : { 'background-color' : '#000' } } } }); }); </script>

Then added mysql and php html entities decoded title inserted in the class tag :
class="fancy {title: '<strong>Le Sceau - 2009</strong><br />Dimensions 60 x 50 cm<br />Technique mixte et bourre sur toile<br /><i>Photo : Aïni / Ifran'</i>'}"

I know i could make use of the API call, but i don't find it as customizable as this simple usage that worked like a charm with v2.0 and is just not available when i switch to 2.0.1
With the new version, the actual href title tag is used, no matter what title is defined in fancybox options with metadata as shown above.

Any idea on how getting this back to work ? Or should i stick with 2.0 ?
BTW : including this metadata ability right into fancybox could bring a neat way for users to handle titles and maybe even other options on a per image basis, without having to include html in the title as i've seen suggested on other threads.

Thanks for any help.

Best regards,
Joe.

Zoomed on IOS device

If you are zoomed, after of before opening the fancybox. Your image is out of the viewport.

History plugin

I wonder if is possible to include "histroy plugin" to fancybox2.

it would be very nice feature

helpers using inline javascript: suggestion

The button and thumb helpers on fancybox 2.0 use inline javascript such as
<a href="javascript:$.fancybox.jumpto ...>

Nothing wrong with that but the scope is global with such inline script, so it probably shoud be written in the form jQuery.fancybox.* to avoid conflicts.

Limited options? Title position? Overlay opacity?

Am I missing something, or are options that were present in Fancybox 1.x not present in 2.0?

For example, I'm looking for an option to alter the opacity of the overlay (the only opacity-related options in the options list on the Fancybox home page are booleans, so it's not them); and the ability to position the title inside the fancybox wrapper?

identifying which image is currently open in fancybox

I'm using fancybox for images and want to identify which image one is currently loaded in fancyBox so I can run some image specific javascript as part of the beforeShow callback

My initial thought is to add a data-id attribute to the anchor tag and tweak the fancybox's image HtML template to pass data-id onto the rendered image tag. Is there a better way?

fancybox2.0 something bugs on ie6.0

fancybox2.0 something bugs on ie6.0

loading(gif file)( Thumbnail helper's preview image/ button helper's button ) position in html content end, and z-index error.

image size stretching

I am using the new Fancybox 2 library and have done a simple implementation whereby the user clicks on a link and a image pops up. It is working fine with the exception of the image displaying roughly 50% larger than the actual file.

I have tried setting autoSize to 'true' but that didn't impact anything, I have also experimented with setting the width and the maxWidth while having autoSize set to 'false'.

Has anyone experienced this problem? With Fancybox 1 there was never an issue.

The base code I'm starting with is:

$(document).ready(function() {
$(".fancybox").fancybox({
    autoSize: true
});

});

The links look like this:

a href="http://www.mysite.com/promo-buttons/fees-payment-large.jpg" class="fancybox"

Thanks in advance for the help.

Short images over-scale on expand

Trying to display some short, wide images using FB2. Looks like if an image has a height less than around 100px (estimate), it gets completely over-zoomed by about 200% on click.

Looking for a workaround quick! Thanks.

FullScreen Implementation

Greetings, can a fullscreen button be placed in the button helper toolbar?
Also if fullscreen is implemented, an option to start in fullscreen mode would be great (fullscreen with auto slide show as well).