Close and nav buttons aren't displayed in IE due to path problems

[Roman]

Hi,

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 (e.g. when a framework being used reroutes
requests) -- the close button and gallery navigation buttons aren't
displayed in IE. I've solved this problem by URL rewriting
in .htaccess file, but I wish I didn't have to do this.

Roman

[Aleksey]

I had the same problem and solved it by adjusting paths in the
section /* IE */ which is in the most bottom of the
jquery.fancybox-1.3.1.css file.

[;Op]

This is a *BLOCKING ISSUE* for me: I want to use fancybox in different
pages, at different directory levels. Of course I want to have a
single copy of fancybox installed, so I would like to refer its images
either relative to the fancybox installation (ie relative to the CSS
or JS files), or with an absolute path. But I work on different web
sites, and the root directory for static resources is different on
each of these sites. Furthermore, this root is different on
development and production servers. I'm doing the dev, but I don't
control production servers: I can't even know "a priori" the absolute
path on them...

As I understand it, there are 4 alternatives to solve the
AlphaImageLoader.src path issue:

1. put fancybox images within the directory (or directory tree) of
each HTML page that uses it. But there are many (actually ALL pages!),
and this is very intrusive: I'll have fancybox files copied (or
linked) many times. This is both cumbersome to install and update.

2. edit css to replace the relative path by absolute image path. But
this path will be different for all my different servers, and also for
dev and prod modes... And I don't know (and don't want to care about)
the absolute path on production servers.

3. URL rewriting in .htaccess. I did not experience this method
mentionned by Roman, but I think it has the same defects as solution
2, plus it is "apache" specific.

4. Javascript in CSS: I've seen http://drupal.org/node/185866 but
still did not experience it. It seems possible to provide
programatically (in javascript) the URL. This sounds interesting, and
could probably be included in fancybox itself: the path to look these
images into could be relative ("fancybox/" as it is today) by default,
but could be overridden with a configuration dependent path prefix
(usually an absolute one), which could itself by computed by another
mean (not a fancybox matter).

Does anyone have another solution to propose? Has anyone experimented
solution 4? Would fancybox team consider doing it?

Thanks for this nice library anyway

[Janis]

The most simple solution would be to set full path as ...
AlphaImageLoader(src='http://yourdomain.com/js/fancybox/
fancy_loading.png' ....

Another approach - remove AlphaImageLoader filters from CSS, like so-
#fancybox-loading.fancybox-ie div { background:
url('fancy_loading.png') top left no-repeat; } and than apply any
pngFix that uses AlphaImageLoader (you could even take pngFix script
from older versions of fancybox).

Janis

[Roman]

I've read that some people experienced problems with png fixes (I
think they complained about performance problem in IE... and maybe
layout or clicking on links problems... I don't remember exactly). Is
there a version that is problem-free?

[Matt Chatterley]

Aleksey =- thanks for your post, very handy - a quick fix was just
what I was after. :)

I guess long term a solution moving forwards might be for FB to take
an argument (optional) setting base path?

[;Op]

Janis: thanks for your answer. Updating to absolute path is actually
the temporary fix I use. I second Roman's request for a reference to a
*good* png fix script.

[jsm174]

Hello.

I just ran into this issue as well. I noticed what was going on after
seeing 404's in Fiddler.

I'm using Fancybox 1.3.1 in Drupal using the Fancybox module.

Anyway, I've updated the CSS and everything is great.

My only concern, from a Drupal module perspective, is that a user can
not just install a module, unpack Fancybox into /sites/all/libraries
and off they go. They will always have to make a change.

Ugh, IE6!!!

-- Jason

[janisto]

Since IE filters use page as a reference in SRC and the plugin/file
(in WordPress & Drupal) can be in different folders, we need to
extract base url from the CSS file (jquery.fancybox-1.3.1.css). A bit
tricky, but IE behavior solves this problem.

Example:

#fancybox-loading.fancybox-ie div {
background: transparent;
behavior:
expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+
(function(){var t=document.getElementsByTagName('link');for(var
i=0;i<t.length;i++){var h=t[i].href.split('?')[0];if(h&&/
jquery.fancybox-1.3.1\\.css$/.test(h)){return
h.replace('jquery.fancybox-1.3.1.css','');}} return '';})() +"../
images/fancybox/fancy_loading.png',sizingMethod='scale')");
}

It will loop all link tags until it finds jquery.fancybox-1.3.1.css
and ignores '?foo=bar' from that css file and then returns the proper
path to that css file. In my example I'm keeping my css files in css -
folder and all the images in images/fancybox -folder.

Hope this helps to solve WordPress & Drupal problems.

-Jani

[Ade]

I tried using Fancybox 1.3.1 in Magento and had the same problems.

Jani's behaviour fix didn't work for me. So I downgraded to 1.2.6 and
it worked straight away. It seems the PNG AlphaImageLoader for IE is a
waste of time.

You can get 1.2.6 at http://fancybox.googlecode.com/files/jquery.fancybox-1.2.6.zip

[janisto]

It seems that Internets swallowed my previous post.

Working sample: http://pastebin.com/D8YqLzQK

I think the reason why it didn't work for you was due to those dots in
the filename.
Use "jquery\\.fancybox-1\\.3\\.1\\.css" instead of
"jquery.fancybox-1.3.1\\.css".

-Jani

[ZiTAL]

To fix IE png-s problem put in the CSS file the absolutes paths for IE
fixes, for example:

/resources/fancybox/jquery.fancybox-1.3.1.css

/* IE */

#fancybox-loading.fancybox-ie div { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_loading.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-close { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_close.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-title-over { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie #fancybox-title-left { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-main { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-right { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_title_right.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-left-ico { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-right-ico { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
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='/resources/
fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-ne { filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-e { filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-se { filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-s { filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-sw { filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-w { filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-nw { filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/resources/
fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }

[;Op]

The solution that I finally adopted is to move the AlphaImageLoader
CSS definitions from the static CSS file to a dynamically generated
part of the page, where the images' absolute path is computed on each
request according to the context.

[Loader]

Thanks, that solution work for me!

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

[Røde]

(Sorry, I think I replied to the wrong person.)

My fancybox folder is within a folder called "js". I've tried changing
the CSS file to contain both correct relative and absolute paths, but
it doesn't seem to have any effect - the buttons still don't work in
IE. Not only are the images gone, but there's no clickable areas at
all, which I thought was odd. Would really AlphaImageLoader make the
entire <a>s disappear?

Here's the page in question, if anyone wants to take a look:
http://pro.plastikk.no/fotovideo/browse.php

[Aaron]

This solution is not working on me.

[Aaron]

Please check this, the problem is in here;

http://www.xkimxo.com/videogaleri.php -> click on a video close image
not displayes.

[Roman]

This thread contains several solutions. Which one are you talking
about? In programming you need to be more precise and clearer than
this.

[Stefan KRUGER]

have you checked ZiTAL's post ?
I had the problem and this was the best solution.

[Vincent]

Hi,

Why does this alphaloader stuff count for all IE versions? I never had
transparency problems in IE8 and even in IE7.

I guess the CSS should be splitted into 2 css files: 1 regular without
the alphaloader stuff and additional stuff for old IE. Put it on the
list for the next release.

In my case it works like this:
1) I use TYPO3 CMS, in which I have a file server and setup options to
define file.css calls in the header
2) I use the Fancybox files, put them on the fileserver (but unpacking
a Fancybox module would also be possible if your CMS works that way)
3) in TYPO3 setup, I can define a condition for IE6 and add the
additional css stuff

Bingo!

[29thfloor]

The IE-only stuff in Fancybox should only be needed for IE 6.

IE 7 and above have support of alpha transparency in PNGs.

[chh...@gmx.de]

I tried to use fancybox within an oxid eshop.
All Paths i specified for ie didnt work out - i guess due to the
htaccess rewrite.

The loading image was displayed, but the close and the arrow images
didnt appear.

I did some testings with the IE Developer Toolbar and came to the
strange conclusion,
that after removing "background: transparent;" for the "/* IE */" css
definitions all icons displayed correctly in ie 6 -8.

Dont know why, but it solved my "problem"

[Mr. Dent]

Here is a little jQuery fix a colleague and I whipped up. It will
dynamically change the PNG path to the current host at runtime. You
may need to change the value of "needle" for your setup.

// UTILITY FUNCTION
function getFullHost() {
var full = window.location.toString();
return full.substring(0, full.lastIndexOf("/"));
}

// FIX
$document.ready(function(){

// IE CLOSE PNG PATH FIX
var needle = "/js/fancybox/fancy_close.png";
var curFilter = $(".fancybox-ie #fancybox-close").css("filter");

//console.log("BEFORE: " + $(".fancybox-ie #fancybox-
close").css("filter"));
$(".fancybox-ie #fancybox-close").css("filter",
curFilter.replace(needle, getFullHost() + needle));
//console.log("AFTER: " + $(".fancybox-ie #fancybox-
close").css("filter"));

});

[the_wanderer]

you know is like one like of code in php  __FILE__

[JungleEditor]

For Drupal users /Fancybox 1.3.1

I could solve the issue by adding :

#fancybox-loading.fancybox-ie div    { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sites/all/libraries/fancybox/fancy_loading.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-close        { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sites/all/libraries/fancybox/fancy_close.png', sizingMethod='scale'); }

to one of my theme's CSS files.

I guess this may not work in the case of multiple production servers etc.
Something similar should work on Wordpress etc.