vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=115076

Add image fade effect to attached thumbnails
by Ntfu2
08 May 2006 18:35

3 Attachment(s)
This will add a pretty image fade effect to attached thumbnails, and will also let you add the effect to any image you want simply using the class="fade" tag.

*Confirmed working on FireFox and Internet Explorer Only*
For Opera see this post
Safari see this post

1. open AdminCP -> Styles And templates, then Main CSS, Scroll down to Additional CSS and enter this in the box


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

2. Save

3. Go To Postibit Templates -> postbit_attachmentthumbnail. After the first <a add


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

4. Save

End refult of postbit_attachmentthumbnail should look similar to this

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Working demo:Will have to scroll a little to get to the attached thumbnails
http://www.fightrice.com/forums/showthread.php?t=8635


Dont forget to click install, and if you really like it, making a nice link back to me in your footer would be lovely :D

rmxs 08 May 2006 18:52

First ...:) Thanks I'll try

sensimilla 08 May 2006 19:27

great hack, doesnt work with Opera but looks fine in Mozilla and IE

Tralala 08 May 2006 19:59

It's sort of a "rollover" effect? Thumbnails are faded, until you put your cursor over them in which case they unfade.

Quote:

Originally Posted by sensimilla
doesnt work with Opera but looks fine in Mozilla and IE

BTW, this also doesn't work in Safari.

Snake 08 May 2006 20:42

Does it work fine on Firefox?

Ntfu2 08 May 2006 21:05

works on FireFox and IE for sure,


Reports say it doesnt work in Safari, or Opera, but it shouldnt mess anything up if it doesnt work

kennn 08 May 2006 21:17

Quote:

Originally Posted by sensimilla
doesnt work with Opera

Nice hack!

Add...


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

...and...


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

And it will work in Opera 9 Beta (but not below).

kennn 08 May 2006 21:24

Not sure about this one, but add...


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

...and...


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

...for Safari support...cannot verify this as I have no access to Safari. Might need to fiddle with the values (100 as opposed to 1, etc.).

Ntfu2 08 May 2006 21:34

Thanks, soon as someone can confirm that i'll be glad to update install instructions

kennn 08 May 2006 21:55

Well, I can confirm the first one I posted as I'm using Opera 9 myself and opacity works like a charm. It is the second one I'm not sure about since I have no access to a Mac - but the khtml-opacity property is reported to work in Safari.

Tralala 09 May 2006 01:56

Safari user here. Update the working demo with the the khtml-opacity property, and I'll tell you if it works, if you like...

Ntfu2 09 May 2006 08:09

ok, demo link updated with both new CSS rules i was given.

Please let me know if that works, and i'll update the hack sa well.

Thanks

Boofo 09 May 2006 08:16

Maybe you could do a browser check for this and have it use what it needs to to be able to use it in that browser. (Did that make any sense at all?) ;)

Tralala 09 May 2006 08:59

Quote:

Originally Posted by Ntfu2
ok, demo link updated with both new CSS rules i was given.

Please let me know if that works, and i'll update the hack sa well.

Thanks


Yes, it now works in Safari 2.0.x.

sensimilla 09 May 2006 09:32

I think theres a typo there
Quote:

.fade img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: .50;
}
.fade:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: .1;
}
should be :

Quote:

opacity: 1;
and now it works fine just like at demo site :)

thanks


All times are GMT. The time now is 17:33.

Powered by vBulletin® Version 3.8.13
Copyright © 2019, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.