Make fancybox dark background

try adding this to your child-theme style.css or your custom css:

#fancybox-content {
border-color: black !important; /* or whatever other color */
}

And if you don’t want those shaded box borders (which are pngs):

[id*="fancybox-bg"]{
background: none !important;
}

Thank you for your response. Unfortunately, this codes only make border black.
I would like to achive effect like:
LIGHTBOX – I don’t know how to explian? Overlay?
with fancybox.
========
By the way: cany you help my with this problem:
TOPIC
?

Ok, but you also need to change that border color.
Anyway you need to change the background of this element:
#fancybox-wrap

I suggest to take a look at this to discover elements in your page:
https://www.themesandco.com/snippet/firebug-best-spent-6-minutes/

I create id #fancybox-wrap in my child-theme style.css
with background colour, but it doesn’t work ??
Otherwise I know firebug. ??

To me it works. Wanna provide a link to your site?

I make site at localhost.
You just put:

#fancybox-wrap {
   background-color: #000000;
}

in your child-theme style.css?
In my case, a border within increased image is bigger, but not all page like in lightbox.
I care about the result: LINK
====
I think it’s called overlay.

Ahhhh sorry, really didn’t get that ??
Well the thing is that customizr by default disables the overlay.. so you can also change #fancybox-overlay background but it will be not shown.
This is an ugly workaround: add following lines to your child-theme functions.php

add_action('wp_footer', 'fancybox_overlay', 500);
function fancybox_overlay(){
?>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            ! function ($) {
                //fancybox with localized script variables
                var b = TCParams.FancyBoxState,
                    c = TCParams.FancyBoxAutoscale;
                1 == b && $("a.grouped_elements").fancybox({
                    transitionIn: "elastic",
                    transitionOut: "elastic",
                    speedIn: 200,
                    speedOut: 200,
                    overlayShow: 1,
                    autoScale: 1 == c ? "true" : "false",
                    changeFade: "fast",
                    enableEscapeButton: !0
                });
            }(window.jQuery);
       });
    </script>
<?php
}

Thank you very much! That’s it.

Finally! ??

Thanks for this solution d4_c0nf. I confess that my solution to this has always been to edit tc-scripts.min.js, which I know is wrong (I have to redo it every time I update Customizr, which is a bit of a pain).

Could you explain how the above solution works? Does this script overwrite the tc-scripts.min.js parameters, or does it get run somehow instead of the function in tc-scripts.min.js?

When you say it’s ugly, is that because it’s inelegant from a programming point of view, or is there another reason that makes it bad (performance/errors/etc)?

I ask because I would like to know if this solution can save me editing tc-scripts.min.js. The fancybox changes are the last remaining site mods that I haven’t made upgrade-proof. It would be nice to be able to upgrade without having to make any mods at all.

Appreciate your thoughts on this.

It’s ugly ’cause as you can see it’s the same code you can find in tc-scripts.js except for overlayShow: 1 and because it simply re-applies fancybox to “a.grouped_elements” with the overlayShow true, after tc-script did the same but with overlayShow false. Both are executed, with mine (because of the priority) after tc-script.js
So now you know how it’s ugly.

Another way, avoiding this double-call is to uncheck the option “Enable/disable lightbox effect on images” (something “philosophically” even uglier ?? ) and because of this:
1 == b
tc-script will skip that call and you can change “my script” to make it work anyway, removing that check this way:
$("a.grouped_elements").fancybox({

Hope is understandable, sorry for my english EF ??

Thanks so much for this d4z_c0nf. Your English is, as always, perfect!

I’m getting there with this one, but need the last nudge. (Javascript is all like incantations to the gods for me; I don’t understand much.)

I think I followed your instructions. I have the following in my php:

add_action('wp_footer', 'fancybox_overlay', 500);
function fancybox_overlay(){
?>
	<script type="text/javascript">
		jQuery(document).ready(function () {
			! function ($) {
				//fancybox with localized script variables
				var c = TCParams.FancyBoxAutoscale;
				$("a.grouped_elements").fancybox({
					transitionIn: "elastic",
					transitionOut: "elastic",
					speedIn: 200,
					speedOut: 200,
					overlayShow: 1,
					hideOnOverlayClick : 1,
					padding: 0,
					overlayOpacity: "0.8",
					overlayColor: "#000",
					titlePosition : "inside",
					autoScale: 1 == c ? "true" : "false",
					changeFade: "fast",
					enableEscapeButton: !0,
					titleFromAlt : true
				});
			}(window.jQuery);
		});
	</script>
<?php
}

It all works fine, but if I switch off the lightbox effect (to stop it loading twice), it doesn’t work ??

Any idea where the logic falls down? Can you tell me what ! function ($) does?

Nothing wrong in what you’ve done. My fault, I didn’t test my solution above.
The reason is that when you uncheck that option, fancybox isn’t loaded at all (righty, since nikeo is smart :D) also the class “grouped_elements” isn’t added to the a tags which wrap the picture.
So leave that option checked and add this:

add_filter('tc_js_front_end_params', 'empty_default_fancybox_param');
function empty_default_fancybox_param($params){
    $params['FancyBoxState']='';
    return $params;
}

This way we just override that param checked in tc-script, but everything will work ’cause we didn’t touch the option itself.

p.s.
there’s another cheaper way to do override that param, but is ugly ?? :
Just after the tag <script> and before jQuery add this

TCParams.FancyBoxState = '';

p.p.s
Nicolas does another thing in tc-script when that param is true:

//replace title by img alt field
        1 == b && $('a[rel*=tc-fancybox-group]').each( function() {
            var title = $(this).find('img').prop('title');
            var alt = $(this).find('img').prop('alt');
            if (typeof title !== 'undefined' && 0 != title.length) {
                $(this).attr('title',title);
            }
            else if (typeof alt !== 'undefined' &&  0 != alt.length) {
                $(this).attr('title',alt);
            }
        });

You might be interested to add also this (without 1==b of course), in your script

p.p.p.s
??
https://stackoverflow.com/questions/3755606/what-does-the-exclamation-mark-do-before-the-function

OK, I see what you’re doing here. Thanks!