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

[Tralala]

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]

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]

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]

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]

I think theres a typo there

.fade img {
filterrogidXImageTransform.Microsoft.Alpha(opa city=50);
-moz-opacity: 0.5;
opacity: .50;
}
.fade:hover img {
filterrogidXImageTransform.Microsoft.Alpha(opa city=100);
-moz-opacity: 1;
opacity: .1;
}

should be :

opacity: 1;

and now it works fine just like at demo site

thanks

[Ntfu2]

Fixed thanks, should work in All browsers now

[Ntfu2]

Originally Posted by Boofo

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?)

It does, but i have no clue where to do a broswer check at?

[Icheb]

Very cool!

[high]* Icheb licks install[/high]

[dude154]

Just installed, awesome! Thanks

Jordan
http://www.kingstonforsale.com

[WarLion]

this css effect rock, thanks for the tip works perfect in 3.6.8