Fancybox2 slight transparency during next/prev gal

Question

I have an issue with Fancybox2, there is a very slight transparency during the transition from one gallery image to another. You can see a rough example of it on their site (the Image Gallery examples, second row): http://fancyapps.com/fancybox/#examples When the image transitions to the next one, you can see the background during a very short time.

Now otherwise this wouldn't be a big issue, but on one of my websites there are 2 images that are very similar, and they have a slow "fade" transition-effect so that it would seem like they are kind of morphing back and forth. Here the problem is very pronounced because you can see all the website text behind the images when the transition happens. I've tried changing various things in the fancybox .css and .js but none of it seems to help.

I also tried using the older Fancybox 1.x , which doesn't have the problem, but it also doesn't have cross-fading so the image fades out completely before the next image starts to fade in. So I can't use that either.

If anyone can figure out what it is that causes that little flash of transparency, that would be greatly appreciated. Thanks.

Answer 1

Well I finally figured it out, so I'll just put this here in case anyone else was wondering. You just need to change the opacity from 0.1 to 1.0 in the following section of the fancybox .js file:

changeOut: function () {
        var previous  = F.previous,
            effect    = previous.prevEffect,
            endPos    = { opacity : 1.0 },
            ...

This way the next gallery image will be already visible when the old one starts to fade out. And obviously this should only be used for images of the same size with the "fade" transition, so the change should be made into a copy of the .js file so it can be loaded when needed.

edit: Also the "startPos.opacity" of the "changeIn" function can be changed from 0.1 to 0.0 to make the transition start even more smoothly.

Answer 2

In the example you refer at the fancybox website, the fancybox's overlay has transparency so you can always see the background, however, you can always set the fancybox's overlay's background with a solid color and the (body's) background won't be visible.

Method 1 (rgba)

$(".fancybox").fancybox({
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(64, 64, 64, 1)'
            }
        }
    }
});

... the last number sets the transparency of the overlay so 1 = full solid (no visible body's background) regardless there is a slow fade transition or not.

See JSFIDDLE

Method 2 (hex)

$(".fancybox").fancybox({
    helpers: {
        overlay: {
            css: {
                'background': '#4a4a4a'
            }
        }
    }
});

... set an hex color value and the fancybox's overlay will be full solid (no visible body's background).

See JSFIDDLE