vb.org Archive - Add image fade effect to attached thumbnails

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.5 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=155)

- - Add image fade effect to attached thumbnails (https://vborg.vbsupport.ru/showthread.php?t=115076)

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

Code:

.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

Code:

class="fade"

4. Save

End refult of postbit_attachmentthumbnail should look similar to this

Code:

<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

First ...:) Thanks I'll try

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

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.

Does it work fine on Firefox?

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

Quote:

Originally Posted by sensimilla

doesnt work with Opera

Nice hack!

Add...

HTML Code:

opacity: .50;

...and...

HTML Code:

opacity: 1;

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

Not sure about this one, but add...

HTML Code:

-khtml-opacity: 0.5;

...and...

HTML Code:

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

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

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.

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

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

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

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.

I think theres a typo there

Quote:

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

Quote:

opacity: 1;

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

thanks

Fixed thanks, should work in All browsers now :D

Quote:

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?

Very cool!

[high]* Icheb licks install[/high]

;)

Just installed, awesome! Thanks

Jordan
http://www.kingstonforsale.com

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

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (4)bbcode_html_printable (6)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (20)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01129 seconds Memory Usage 1,758KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (4)bbcode_html_printable (6)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (20)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: