Greg Greg - 4 months ago 28
jQuery Question

Overlay not working fancybox v2

I'd like to change the overlay and opacity of a fancy box in the code below. I tried to add these lines based on JFK's suggestions but unfortunately it is not working:

<script type="text/javascript">
$(".fancybox").fancybox({
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.3)'
}
}
}
});

</script>


just after the opening script tag but without success. Any thoughts? Thanks

My full code now:

<script type="text/javascript">
$(".fancybox").fancybox({
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.3)'
}
}
}
});

function openFancybox() {
setTimeout( function() {$('#various1').trigger('click'); },2000);

}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 1 });
$('#various1').fancybox();

});
</script>


Within body tags:

<div id="various1" style="display:none;">
<h2>Welcome to our website!</h2>
</div>

JFK JFK
Answer

Fancybox v2.x options are new and not compatible with previous versions ... for instance overlayOpacity and overlayColor are options for fancybox v1.3.4 and won't work with version 2.

Check fancybox v2.x documentation for the right options you should be using.

To change color and opacity in fancybox 2, you should use this format (v2.1.4 as today) :

$("#various1").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

...where the last of the 4 numbers is the selected opacity (EDIT : the code above matches the OP's selector)

Check JSFIDDLE

IMPORTANT : IE[6/7/8] doesn't support rgba .... check this article for further reference.

Comments