0

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.

Dade
  • 11
  • 3

2 Answers2

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.

Dade
  • 11
  • 3
0

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

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Thank you for the response. I had in fact already tried that and while it does fix the problem, I can't use a solid overlay on my website, for design reasons. I know this is kind of a perfectionist issue but I just thought if someone here happened to know what part of the code precisely (jquery or fancybox, css or js, etc..) causes that little transparency, there would probably be a pretty simple fix for it. – Dade Jan 22 '13 at 19:40
  • Actually, can you think of a way to have a secondary solid overlay that would have a fixed size? That way it could just be behind the images. – Dade Feb 11 '13 at 23:57
  • Like, so that you could have a normal transparent overlay, and then another solid black overlay that would be between the normal overlay and the image. And the size of the solid black overlay could be set so that it would be the same size as the image, that way the areas around the image could be transparent but the area right behind the image would be black. If that could be accomplished it would nicely solve my problem. – Dade Feb 12 '13 at 16:25