Add image fade effect to attached thumbnails

[Ntfu2]

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 (https://vborg.vbsupport.ru/showpost.php?p=970024&postcount=7)
Safari see this post (https://vborg.vbsupport.ru/showpost.php?p=970031&postcount=8)

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(opa city=50);
-moz-opacity: 0.5;
opacity: .50;
-khtml-opacity: 0.5;
}
.fade:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=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 :D

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

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]

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.

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

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 {
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=50);
-moz-opacity: 0.5;
opacity: .50;
}
.fade:hover img {
filter:progid:DXImageTransform.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 :D

[Ntfu2]

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!

* Icheb licks install

;)

[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