How to fix : jQuery Fancybox 1.3.1 close and nav buttons not displaying in IE

03 Sep 2010

How to fix : jQuery Fancybox 1.3.1 close and nav buttons not displaying in IE

Web Design, Development Tips & Tutorials 8 Comments

I encountered the problem when implementing the jQuery plugin FancyBox 1.3.1 in one of our clients site. The plugin renders correctly in FF and Chrome but in IE, there is a problem. The close button,shadow images are not being displayed.

The problem lies with path defination in that the jQuery plugin FancyBox uses AlphaImageLoader for IE. AlphaImageLoader expects image paths to be relative to the HTML document, while CSS expects image paths to be relative to style sheet files. This causes a problem in certain environments.

To solve the issue, in the file jquery.fancybox-1.3.1.css, you can see this for Internet explorer at the end of the file:

/* IE */
#fancybox-loading.fancybox-ie div	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_loading.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-close		{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-over	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie #fancybox-title-left	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-main	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-right	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_right.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-left-ico		{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-right-ico	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_right.png', sizingMethod='scale'); }
.fancybox-ie .fancy-bg { background: transparent !important; }
.fancybox-ie #fancy-bg-n	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-ne	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-e	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-se	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-s	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-sw	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-w	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-nw	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }

Just replace all the AlphaImageLoader src by the absolute URL of your js folder, let say you have a folder /js/fancybox/ (where js is located at the root folder e.g site/js/fancybox/):

/* IE */
#fancybox-loading.fancybox-ie div	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_loading.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-close		{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_close.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-over	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie #fancybox-title-left	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-main	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-right	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_title_right.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-left-ico		{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-right-ico	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_nav_right.png', sizingMethod='scale'); }
.fancybox-ie .fancy-bg { background: transparent !important; }
.fancybox-ie #fancy-bg-n	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-ne	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-e	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-se	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-s	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-sw	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-w	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-nw	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='js/fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }

If that doesn’t work, replace all the AlphaImageLoader src by the full URL i.e http://www.mysite.com/js/fancybox….

Other solutions:

Use older version jQuery Fancybox 1.2.6 – It works without any problem
Use PNG script fix

8 Responses to “How to fix : jQuery Fancybox 1.3.1 close and nav buttons not displaying in IE”

Reply
Vitor Luis says:
September 17, 2010 at 4:21 pm
Thank You!
Its work!
Reply
dee says:
March 15, 2011 at 11:10 am
Bravo!
Reply
Luc says:
April 9, 2011 at 7:22 pm
Merci, merci ! Super simple mais des heures à chercher.
Reply
Tortuga says:
May 22, 2011 at 1:59 am
Thank You! Bravo! Merci! Obrigado!
Reply
Sums says:
June 12, 2011 at 12:34 pm
I have Fancybox 1.3.4 and it worked fine in several browsers. Only bug was that the background shadow was not shown in Internet Explorer Browsers. After the above-mentioned corrections of the paths in the 1.3.4 – css now the background shadow is also shown in the Internet Explorer. THANKS!
Reply
Isiah says:
June 24, 2011 at 12:59 pm
Well I’ve used the absoloute path method but the closing images are still not showing in IE8, so now I’m hoping viewers will just click on the page background to close the image – or use Firefox !!
Cheers
I
- Reply
  Safiweb Interactive says:
  June 26, 2011 at 8:00 pm
  Why don’t you force IE8 renders pages as IE7 by using http://davidwalsh.name/ie8-emulate-ie7
Reply
Luiz Reginaldo says:
September 16, 2011 at 12:57 pm
Good Job!
=)

Web Design, Web Development, Web Hosting & SEO by Safiweb Interactive a Web Design Agency in Nairobi, Kenya