[Plugin: Easy FancyBox] change background opacity of iframe

Hi Ivonne, you are talking about the iframe content here, not the overlay surrounding the content, correct?

An interesting idea ?? so I started with some rough CSS (I’m using Automattics’ own Custom CSS plugin) to get it done. Here are my observations:

To overwrite the FancyBox default white background you need to call #fancybox-outer. I found that setting transparency for that layer works but it has some results you need to take into account. I only tested in Opera and Chrome so I don’t know about FF let alone what it does in IE but here goes…

This CSS rule will cause not only the background but the complete content wrapped by FancyBox become semi-transparent. This includes images and flash movies plus any other iframe content (depending on browser? and except PDFs):

#fancybox-outer {
filter:alpha(opacity=7);
-moz-opacity:0.7;
opacity:0.7;
}

You can see this in action on https://test.4visions.nl/easy-fancybox-sandbox (will leave the CSS running for a couple of days, try the iFrame Link in the menu and any other image or link in post content to see the results)

Alternatively, you can use CSS3 to handle it differently. The following code only targets the layers own background and leaves the rest of the FancyBox content alone. So the final result depends on the content and it’s own CSS:

#fancybox-outer {
background-color:rgba(255,255,255,0.7);
}

So if you are loading content that is opaque (like an image) or has an opaque background like html with a background color, you won’t see any difference, but when loading content that is transparent or has transparent backgrounds you should see your page through it… But certainly no guarantees for IE here !

Hope you can do something with these hints. If you can come up with a more elegant solution, please let me know ??

Hi RavanH,

That’s perfect! I was fiddling with it last night and came up with the same CSS solution. I used the first one – didn’t try the second but I trust that works too. Your code is great to follow and intuitive.

If you want to see how mine works, the url to the site I’m developing is https://alexshakar.com/dev/books/city-in-love/
Click on the ‘Read Excerpt’ button below the book cover.
I used a black 80% opacity iframe with a 1px border.
Your plugin works perfect for this because I can still style the iframe html content however way I want.

Thanks for your help and for writing such a great plugin!
Ivonne

Great site. Looks really good with that semi-transparent iframe overlay ??

If you want to test with the second (CSS3) approach, you will want to make it #fancybox-outer { background-color:rgba(0,0,0,0.8); } (black, 80% opacity) and subsequently remove the body background-color (and maybe set “background:transparent” for cross-browser compat?) in the linked html files. The advantage is that images and text will not be semi-transparent (easier on the eyes) and if you want to make elements of that content opaque, just give it a background color ??

Hey RavanH,

Just wanted to let you know that I tried the CSS3 option and that wasn’t working for me, so I stuck with the first option.

Also wanted to let you know thanks for the update to 1.3.4 – I had issues with IE6/7 not displaying the iframe but as soon as I updated it worked!

Awesome work!

Hey RavanH,

I just noticed something else… on IE 7 with opacity set I get a weird behaviour where the close X circle gets cut off where the edges of the iframe end. So I only see the bottom left quarter slice of the close circle image, if that makes sense.

Anyway, for now I’m leaving out opacity, but I appreciate your help!

Hmmm… I think that rule filter:alpha(opacity=7); should be filter:alpha(opacity=70); to be the equivalent of an opacity of 0.7. Sorry about that.

But if that is not enough, try adding a second style rule like:

#fancybox-close{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

to force the close button back to it’s normal opaque state.