Add image fade effect to attached thumbnails

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

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

2. Save

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

class="fade"

4. Save

End refult of postbit_attachmentthumbnail should look similar to this

<a class="fade" href="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]"<if condition="$show['newwindow']"> target="_blank"</if>><img class="thumbnail" src="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;stc=1&amp;thumb=1&amp;d=$attachment[thumbnail_dateline]" border="0" alt="<phrase 1="$attachment[filename]" 2="$attachment[counter]" 3="$attachment[filesize]" 4="$attachment[attachmentid]">$vbphrase[image_larger_version_x_y_z]</phrase>" /></a>
&nbsp;<if condition="$show['br']"><br /><br /></if>

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

[rmxs]

First ... Thanks I'll try

[sensimilla]

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

[Tralala]

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

Originally Posted by sensimilla

doesnt work with Opera but looks fine in Mozilla and IE

BTW, this also doesn't work in Safari.

[Snake]

Does it work fine on Firefox?

[Ntfu2]

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]

Originally Posted by sensimilla

doesnt work with Opera

Nice hack!

Add...

opacity: .50;

...and...

opacity: 1;

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

[kennn]

Not sure about this one, but add...

-khtml-opacity: 0.5;

...and...

-khtml-opacity: 1;

...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]

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

[kennn]

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.