Indexhibit Support

I tried and tried to get rid of the hover effect on images in thickbox... Can't figure out.... Any idea....

Here is the page

http://poivre.net/inex/fashion/

I have a ruel in my css that says a img {border: none;} but this doesn't seem to have any effect. I went into jquery.thickbox.css but didn't find what to change...

Thanks a lot

the quick and dirty way would be to put this in your style sheet (i think).

a.thickbox:hover {background:#fff;}

Hello.

If you want links not to be white in the on-hover state then change lines 26-27 in jquery.thickbox.css

1. #TB_window a:hover, #TB_window a:active { 
2. color: #ff0; /* example... */
3. background: #000; 
4. text-decoration: none; 
5. }

@ arsondpi, I don't undderstand your input... Changing the color value don't change anything....

@ youmustfeed it worked, thanks.

Is this way okay?

Thank you all

1. #TB_secondLine a:hover { color: #000; }

He's talking about the hover over images before it's activated...not when they are activated. But he got it working...

;)

Hello guys,

We've been searching around and still could'nt find it out:
how can we roll-over a thickbox (image inside) and have it coloured with a colour filter (50%?)?
we are trying to do this at:
http://www.camarim.pt/index.php?/escritorio/vasco-correia/

thanks a lot!

On hover over the image before Thickbox is enabled (before the click)? I'm not sure what you mean by 'image inside'...

Hello Vaska!
(CONGRATULATIONS for indexhibit and the forum - we are architects (no clue of html, site...) and started 2 days ago with your application and are fans now! - thank you!)

so: the images (thumbnails) should become colour-filtered on on-hover state

thank you

I found an example similar to what we are trying to have:
Webpage "out of paper/graphic design"
Hope you can help: we've tried 100000 different things, no luck...
thank you

sorry, but can't really make it work :(
is it in the thickbox settings I should be changing?
just can't get the thumbnails changing...
tried this out (but nothig changed):

#TB_window,
#TB_secondLine { font: 10px Verdana, Arial, Helvetica, sans-serif; }

#TB_window,
#TB_caption,
#TB_secondLine,
#TB_window a:link,
#TB_window a:visited,
#TB_window a:focus { color: #A0A0A0; text-decoration: none; }

#TB_window a:hover { color: #00BFFF; }
#TB_window a:active { color: #A0A0A0; background: #000; text-decoration: none; }

thank you!!

This isn't a Thickbox issue...it's an html, css and probably javascript issue. It's quite complicated...

I wouldn't even know where to begin to explain how to do this...

thanks for your answer... though it isn't really good news for us ;)
could you give me a tip on where to find out more about it? if we did it till now we won't give up!
we've been through many threads and found very few on this, but maybe there is some literature elsewhere?

Thank you so much for your time,

Patrícia

would it be easier to have a solid colour rectangle covering the thumbnail?

... or just a line under the thumbnail on on-hover state?

any help much appreciated!, thanks

Look for javascript hover on google.

this will give you a bottom border in the on hover state.
But make sure you check that it works for all (most) browsers...

1. #img-container a.thickbox:link { border-bottom: 20px transparent solid; }
2. #img-container a.thickbox:hover { border-bottom: 20px yellow solid; }

arsondpi, you are super!!! thank you! ;-)

a few questions though
1 - do you have any idea why the last row of images does'nt activate?
2 - I cant make the line thicker nor change its position to top instead of bottom...
3 - big big help already, thanks!

1-no I don't. If you give us an address with an example, it might be easier for us to check/help...
2-As it is now you can't. That's because I typed border-bottom. If you change it to border-top it will do what you're after. If you add border-top it will do something else... try things out. :-)

1 - solved: it is active now... by magic (?!)
but...
2 - big mess (http://www.camarim.pt/index.php?/project/casa-tropical/)... this is what I did:

#img-container a.thickbox:link { border-bottom: 20px transparent solid; border-top: 20px transparent solid; border-left: 20px transparent solid; border-right: 20px transparent solid; }
#img-container a.thickbox:hover { border-bottom: 20px #00BFFF solid; border-top: 20px #00BFFF solid; border-left: 20px #00BFFF solid; border-right: 20px #00BFFF solid; }

was just trying to have a frame for the thumbnails on hover... and now we got the fattest line on earth! ;-)

You did it? Nice!

Today I have seen three sites that were done by first time 'web' designers that were super nice - really solid customizations.

So cool.

this will give you a bottom border in the on hover state.
But make sure you check that it works for all (most) browsers...

#img-container a.thickbox:link { border-bottom: 20px transparent solid; }
#img-container a.thickbox:hover { border-bottom: 20px yellow solid; }

Where do you put these lines of code? This is exactly what I want to do!

Pieper,
I am an amateur on this, but what the big guys sayd is that
you should put this in your style.css, which I did, at the bottom (when you have the image container stuff)..
good luck

awesome -thanks so much for posting!
i'm going to try it right now

you have a great site by the way...your work is wonderful!

what I still could not do is
having it as a frame for the thumbnails:
my last idea was to reduce the lines to

#img-container a.thickbox:link { border: 20px transparent solid; }
#img-container a.thickbox:hover { border: 20px yellow solid; }

hopping it would do all the borders of the image, but, of course, it didn't.

any ideas?

hmmm - i cannot even get the first part to work...

any additional guidance from our fearless leaders?

oh - I am close....!

why does my blue hover bar stick past my white thumbnail box?
can anyone help with this.
see it here: PIEPER

(and by "stick past my white thumbnail box" - I mean that it sticks out the the right - wider than my box...

I see nothing on that page...???

doh!
here we go

PIEPER

give this a try:

1. a.thickbox img {
2. border:3px solid #fff;
3. padding:0;margin: 0;
4. }
5. #img-container a.thickbox:link {
6. display:block;
7. float:left;
8. margin:10px;
9. }

I strongly urge people to cross check these things with most browsers...

I’ve customized my links the way I want them for my menu but I want to create an additional style of link for my Indexhibit link and the navigation buttons within Thickbox.

Can anyone help please?

http://www.be-plus.co.uk/test/

Fixed it!

I hadn’t specified a background value in the jquery.thickbox.css so it was just pulling in the one from the menu. I set the link in Thickbox to:

#TB_window a:link { background: none; color: #000; text-decoration: none; }