Img Nav for Thickbox error

orionrush / 2010-05-19 15:29:00   

Ive run into a problem that I'm not sure where to look to fix it. Any pointing inthe right direction would be fantastic.

The image prev | next that appears under the image in Thick Box, is floating above the image - But only on the first slide that comes up! If the image isn't too dark you will see the nav buttons and be able to click them. The next image that comes up will be fine, the nav positioned perfectly under the image.

I've implemented a few "fixes", first Wobble Box and implemented the full background plugin fix (http://www.indexhibit.org/forum/thread/7813/).

Its the fact that its not working the first time but then fine that has me confused.

Many thanks

My url
http://www.astonesthrowaway.co.uk/indexhibit/index.php?/launch-of-the-armada/

btw - the indexhibit link is in the About section.

orionrush / 2010-05-20 10:33:09   

bump?

rickykappa / 2010-05-20 11:28:10   

I can't even see the images enlarged, they hide under the thumbs... (firefox/pc)
did you try to validate?

orionrush / 2010-05-20 13:09:48   

rickykappa, should have started with validation. noob mistake, sorry.

Re validation:
Before posting I did try to first fix this problem by introducing a break tag into the output of the thickbox.php - many of the original errors were from this. Now that I've gone ahead and undid this, the nav is rendering correctly - go figure.

About the crazy thumbnail behaviour, Im not seeing it in os x across any browsers ive tested, safari, ff, chrome. It sounds like a z-index issue, which I'll look into. This still dosen't, explain my pervious problems though.

By any chance dose the gallery look ok to those of you using IE now?

many many thanks. . .

rickykappa / 2010-05-20 13:24:18   

yeah I guess is a z-index issue, however I don't run IE :-P
with firefox when I click on a thumbnail the enlarged img floats to left, positioning below the menu (I need to scrool down on my screen) and under the thumbs layer...

orionrush / 2010-05-21 01:09:16   

bizzare,
I cant replicate what your seeing, good lord.

I use crossover to emulate IE 6/7, all mostly good, FF mac of course renders fine.
netrenderer wont give me a triggered view. . . .

So I just changed the z-index of jquery.thickbox.css from 1 to 100 (that aughta do it!)

  1. .tbimageholder  {
  2. ¬†¬†¬†¬†position: fixed;
  3. ¬†¬†¬†¬†z-index: 100;
  4. ¬†¬†¬†¬†margin: 0px;
  5. ¬†¬†¬†¬†padding: 0px;
  6. }

anyone ff on a PC?

thanks rickykappa for catching this...

rickykappa / 2010-05-21 09:24:14   

sorry to say that now thickbox enlarged image doesn't even show...
I see that in the meantime you validated xhtml, so I assume that there is some css issue but can't open the css validator page at the moment

jkm / 2010-05-21 11:03:48   

Hello.

Sorry to hear you're experiencing problems with my wb. I can see that nothing really works now as you have jquery 1.1.2 included instead of 1.4. Also the z-index solution is the right way to go, however there are several z-index values that may need to be adjusted if I remember correctly, such as the navigation etc.

regards,

Jesper

orionrush / 2010-05-21 16:22:10   

Humm,

@jkm - thanks for chiming in.
I was experimenting with going back to the Eastdoc theme to see if I could sus anything out that way. My theme has been re-implemented and it does use jquery 1.4.0

Perhaps I misunderstood z-index, I assumed that if I raised the index of the containing element, that the image and nav would come up with it, unless those elements had z-indexes that dictated otherwise. I just haven't needed to muck about with it much...

@rickykappa - crazier still. . . how about now?

I've updated and validated the css file in question. . . a few flags on
http://www.astonesthrowaway.co.uk/indexhibit/ndxz-studio/site/css/jquery.thickbox.css

  1. lines 28, 29, 30 are all throwing up flags but for the following applied to #tboverlay:
  2. ¬†¬†¬†¬†opacity: 0.9;
  3. ¬†¬†¬†¬†-moz-opacity: 0.9;
  4. ¬†¬†¬†¬†filter: alpha(opacity=90);

I validated the overall css too and found an extra } floating about quite high up. If it was causing the problems, I'd imagine we'd have seen its effects sooner.
http://www.astonesthrowaway.co.uk/indexhibit/ndxz-studio/site/Beacon/style.css

its hard trying to fix something you cant even see. . . .but thank you for your help.

rickykappa / 2010-05-21 22:11:28   

I can see it now: fixed! ;-)

orionrush / 2010-05-22 03:11:51   

hoooray!

Thanks y'all for sticking though this. rickykappa, your a gem!

orionrush / 2010-05-22 03:12:32   

This thread has been closed, thank you.