« jQuery UI 1.8 autocomplete : how to fix issues/bugs with label and value

jQuery Fancybox 1.3.1 plugin images not working on IE : How to fix it

Here is a little fix for the jQuery plugin FancyBox 1.3.1.
If you have encountered the same issue as me with the images display on IE, here is the solution:

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 of your folder system eg mywebsitefolder/js/fancybox/), just change the src like that:

/* 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'); }

There you go, the image will be displayed as expected and it will work on every browser IE6/7/8, Chrome, Firefox, Opera, Safari, etc. Sweeeeeeeeet isn’t it?

Hope it helped you out!

This entry was posted by Julian on August 11, 2010 at 7:20 pm, and is filed under PHP / jQuery. Follow any responses to this post through RSS 2.0.You can leave a response or trackback from your own site.

Comments (26)
Pings (1)
Related Posts

#1 written by JaRo 1 year ago

Thanks a lot mate

Quote
#2 written by worldwisewebs 1 year ago

Thanks so much for this, saved me a lot of time.

Now that I have the controls, any idea why the fancybox is coming up much too wide, in IE only?

Quote
#3 written by Julian 1 year ago

Hi Jeremy, first thank you for your comment. About your IE issue maybe have a look into the CSS of the fancybox (eg #fancybox-outer) but that’s odd, I’ve tested it on IE6/IE7 and I did not encounter this issue. You can define the width/height of your fancybox when you instanciate the fancybox object like that :

$(‘a.form’).fancybox({
‘enableEscapeButton’:true,
‘overlayShow’:true,
‘overlayOpacity’:0.5,
‘width’:470,
‘height’:800,
‘transitionIn’:'elastic’,
‘transitionOut’:'elastic’,
‘speedIn’:300,
‘speedOut’:200,
‘type’:'iframe’,
‘titlePosition’ :’outside’
});
Hope that’s gonna help you .

J.

Quote
#4 written by Suzanne 1 year ago

It still doesnt work for me Ah its driving me mad.. What could it be?

Quote
#5 written by Suzanne 1 year ago

Ahhh I got it, i needed to upload it to the server.. Pfew! I’m a happy person right now. Thanks a lot!

Quote
#6 written by Roxana 1 year ago

Hi, thanks for your explanation and for share it.
I think i´m doing something wrong because of the 3 images i can see only one at its wright size. I have 3 images (thumbs) only the #2 scales ok . Any idea ?
Actually the absolut url of my js files are located in lightbox folder. I didn´t change anything and as i said only the @ images shows at its right size.
Thanks in advance !!

Quote
#7 written by Julian 1 year ago
Hi Roxana,

I’m not sure to totally understand what’s your problem. is the photo url in your a tag the good one (not the thumb)?
for instance

drop here a sample of your code and we’ll see that.

Cheers,
J.
Quote
#8 written by Claudio Castro 1 year ago

Thanks that worked perfect, except for the loading image that looks a little weird but thanks anyway

Quote
#9 written by Pankaj 1 year ago

Hi Julian

Thanks so much for this solution.
It works…! Fine,Actuly It’s folder structure problem so need to somthing change in to Script code to fix it.

Pankaj

Quote
#10 written by Athena Hollow 1 year ago

OMG you just saved me from trashing the script because I couldn’t get the images to show up. Why the hell I didn’t notice this before, I have absolutely no idea, but I am eternally grateful that you posted it.

Quote
#11 written by Pavlicko 1 year ago

Nice tip, but my (stupid) issue was forgetting to remove the LAST damn comma before the closing brackets when declaring the parameters for the function. That gets me more often than I’d like to admit.

Removed it, IE works great now.

Quote
#12 written by rahd_rr 1 year ago

Thanks so much for this solution… and for share it ..

me salvas te de una perdida de tiempo enorme…

GRacias!!!

Quote
#13 written by super132 1 year ago

Great thanks to you mate. I have been debugging for quite a lot of times

Quote
#14 written by Brad Trivers 1 year ago

Can you ignore IE6 users yet? If so, then just comment out the IE section at the bottom of the CSS and it will work fine in IE7 and above.

Quote
#15 written by Julian 1 year ago

I wish Brad! Thing is many users are still using IE6 and many clients require their website IE6 compatible…

Quote
#16 written by Scott Grodberg 1 year ago

According to w3counter, IE6 usage is under 5%. Thank you Brad, it will be commented out

Quote
#17 written by Rahi 1 year ago

AWESOME… I read a lot of junk on google groups. This one seems to solve png problems.

Thanks

Quote
#18 written by James McGill 11 months ago

I am running into a similar problem in IE, but the above solution did not work. I am unsure if this is due to 1.3.4.

Any help you can provide would be greatly appreciated!

Quote
#19 written by santosh 11 months ago

thank, i wasted almost 2 days to fix this problem
at last got your solution

Thanks again

Quote
#20 written by Julian 11 months ago

Hi James I tried to fix this issue on the 1.3.4, still haven’t found any solutions. That’s why I am still using the 1.3.1 for IE6 and IE7.
Sorry mate, I write a post about it few months ago, I let you know if I found a solution.

Quote
#21 written by graham 9 months ago

You have a Planet Sized Brain…

Quote
#22 written by Sums 8 months ago

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 above-mentioned corrections of the paths in the respective jquery.fancybox-1.3.4.css for IE (IE 7+ beginning line 349) now also in the IEs the (3D) background shadows are shown
THANKS A LOT for this post!!!!

Quote
#23 written by ussy1649 7 months ago

I love you man! Finally works, thanks!

Quote
#24 written by Gabriel Somoza 6 months ago

Beautiful! This helped me!

Quote
#25 written by Ivan 6 months ago

Great!
I just thinking about changing the fancy and you save me a time.
Fancy 1.3.4 have the same issue.

Quote
Type your comment
You may use these HTML tags: <a> <abbr> <acronym> <b> <blockquote> <cite> <code> <del> <em> <i> <q> <strike> <strong>
Comment Feed for this Post