I have tried to get a Fancybox iFrame to load automatically and to give the overlay a different color. So far so good on the autoload.
Got it working. The color I couldn't get to change.
Now I tried several examples many listed here. But I guess I am doing something wrong.
In my head code I am loading :
<script type="text/javascript">
$(document).ready(function(){
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
'overlayColor' : '#ec2d2d',
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
And my HTML is like this :
<a class="fancybox fancybox.iframe" id="hidden_link" href="iframe.html" title="HOI">Iframe</a>
It opens onload. But I cannot get the overlay to turn red.
What am I missing here? I have tried as you see several options. But none used the right way.
TIAD
Edit:
When I try to add this code:
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
I seem to make a mess of the Syntax. Because it doesn't respond to this script. But I am clueless of how to do this correctly.
This is what I got now:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
},
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
Also adding the CSS code makes no difference:
#fancybox-overlay{
background-color:#ec2d2d !important;
}
Could it be that there is another JS file loaded that overwrites all of my settings??
These are the libraries loaded:
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
Just set the background color before showing of fancybox.
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});
and then remove .fancybox()
from $("#hidden_link").fancybox().trigger('click');
Just like this it'll work perfectly.
您应该能够在CSS中更改叠加颜色
#fancybox-overlay{background-color:#ec2d2d !important;}
你可以单独执行叠加,
$.fancybox.helpers.overlay.open({parent: $('body')});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.