MaxiGallery with jQuery images not showing in IE6 ???

I have built this volunteer website:http://www.theshinecentre.org.za/

At the bottom of the Home page I have created a MaxiGallery using the Fancybox jQuery system. It works fine in FF3, Safari4, IE7, IE8 and Opera9.6.

The gallery is not working in IE6 though. The thumbnails are displaying and the navigation from image to image is working, but the full size images do NOT display???

I have tried all kinds of things but so far I can’t fix this. I know: who cares about IE6? In this case this site is for a volunteer group helping with school age literacy. Its a non profit and I want this to work in IE6 as there are still a lot of IE6 users in Southern Africa.

Any thoughts?

Thanks!

Max

Still plugging away at this.

For now I decided to add a scary "upgrade now" message for IE6 users. Still, I would really like to know why the images in the gallery are not displaying in IE6...

Hi Max,

hm....weird, could it be css-related, maybe check the DOM and play around with the Fancybox css parts. you got fancybox working with ie6 on a few other sites as i can remember, right?!

cheers, jan

btw. have you been to south africa? i lived there for one year, not far away from Observatory & Wynberg. i stayed in Kommetjie, which is close to Cape Point. That’s actually how i got my nick, you just feel like a sharkbait surfing down there 

I did get it working in IE6 with another site.

The Fancybox has been updated to match the jQuery library. I tried that with the same results. I think you might be correct about a CSS issue though; maybe a Z-index thing? Will go back into it soon.

Yup, I was born in Cape Town and spent most of childhood there...

Max

The Fancybox has been updated to match the jQuery library

did you test this fancybox-configuration on a plain static website without any other scripts or css that could collide? if it works, i would go from there and add step by step all the other scripts and css and see what’s causing the problem....

jan

Does this look OK?


The gallery functions, the Fancybox motion and drop shadows are there, and the navigation works. This must be a Z-index thing. I will try creating a test gallery outside of MODx and Maxigallery to see if I can’t duplicate the problem. I might have to drop Fancybox from this project. I did get this to work in another site but I just can’t see the issue that is stopping the images from showing.

Hi!

...maybe in "jquery.fancybox.css" line 93

img#fancy_img {
border:0 none;
height:100%;
left:0;
margin:0;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:10;
}

->z-index:10;<-
set the z-index to 300 or something

btw (Linie 196)...

div#fancy_bg {
border:0 none;
height:100%;
left:0;
margin:0;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:70;
}

->z-index:70;<-

Tried that...

I have tried the new and older Fancybox scripts with the same results. Messing around blindly with all kinds of z-index changes but no luck so far...

This is one of those "little details" with a big impact.

maybe we could check if it is this part which is causing the trouble by changing the background-color



to #000 for example and/or to transparent

img#fancy_img < div#fancy_content < div#fancy_bg < div#fancy_inner < div#fancy_outer < div#fancy_wrap

right now it’s:

div#fancy_bg = z-index:70;

div#fancy_content = z-index:100;

img#fancy_img = z-index:30;

maybe set all z-indexes but the img#fancy_img to zero, just to check if the image is loaded

*edit: it probably is loaded, otherwise the fancybox probably wouldn’t change to the different sizes