Avatar/Image Reflection Effect

This modification dynamically adds a subtle "reflection" effect underneath avatars and/or images on your forums. The reflection will automatically fade into your forum's background color, whatever it might be. You can also offer this effect as an option for your members' uploaded images via a BB Code.

This effect uses unobtrusive javascript to keep your code clean. It doesn't require additional server work. It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing. Best of all, it's under 5KB!

"Simple. Unique. Classy. Thank you!"
- Forum admininstrator, JoeSixPack

"This mod gives my forum a slick, almost 3-D look!"
- Forum administrator, Tralala

Details:
1 file upload ("reflection.js") to forum's clientscript directory

1 template edit to "header" template

Optional edit: 1 for avatars in thread view ("postbit_legacy" template)
Optional edit: 1 for avatars in thread view ("postbit" template)
Optional edit: 1 for avatars in member profile ("MEMBERINFO" template)
Optional edit: 1 for profile picture in member profile ("MEMBERINFO" template)
Optional edit: 1 for avatars in Members List ("memberlist_resultsbit" template)
Optional edit: 1 for new BBcode (AdminCP -> Custom BB Codes -> BB Code Manager)
Optional edit, not recommended: 1 for ALL images posted inline via standard IMG BBCode ("includes/class_bbcode.php" file)

(All of the above optional edits involve simply inserting class="reflect" to the image HTML code, which adds the reflections. The code to replace for each edit is included in the .zip archive.)

See screenshots to see it in action...


My very first vBulletin hack! Kudos to the fine coders at vBulletin.org whose work inspires me.

Special thanks to Cow's Blog for the reflection.js code. Shared and distributed freely under MIT-style License.

Enjoy!!

[Doc31]

Is there a way to make a check box in say the vb options page in the usercp to enable/disable this feature?

Im gonna have a look and see if i can make it work for me using some modz if not a bit of code to do this would be cool as some people have animated avatars that can be a bit of a strain on the javascript code.

Thanx

[Tralala]

Originally Posted by Doc31

Is there a way to make a check box in say the vb options page in the usercp to enable/disable this feature?

Im gonna have a look and see if i can make it work for me using some modz if not a bit of code to do this would be cool as some people have animated avatars that can be a bit of a strain on the javascript code.

Thanx

There's no more or less strain on the javascript code; it either works or it doesn't. Animated avatars reflect nicely in IE, and with a static image in any other browser. But there's no delta of "strain." Sure, Javascript in general can bog down a user's old/slow computer, but that would have nothing to do with whether or not an image to be reflected is animated.

That said, I'm sure you could whip up lots of checkboxes...
AdminCP: Reflect all avatars? (perhaps make it usergroup based)
AdminCP: Reflect THIS avatar? (ie: on a per user basis)

Or...
UserCP: Reflect MY avatar?
UserCP: Reflect avatars of OTHERS?

I don't have time to incorporate any of this, but if you do, it would be great if you could share it here.

[Doc31]

No problems thanks for the reply.. you have given me some good pointers if i come up with any additions i will let you know and be glad to share.

thanks

[Ekremxx]

i have setup that but all images to be that how i can fix that?

[Tralala]

Originally Posted by Ekremxx

i have setup that but all images to be that how i can fix that?

Huh?

Sorry, I've read your question a few times now and have no idea what you are asking.

[Dotara]

Hi,

This is a wonderful modification and installed it for vB 3.6.7 on postbit_legacy. Seems like it's just working fine but reflection avatar showing a little bit left than normal avatar. You'll understand if you take a look at my attachments. How to make reflection avatar in middle like normal avatar? I'm using ForumThemes Galaxy skin.

Many thanks

[Shazz]

Seems like you removed the <div align="center"> or <center>

[Dotara]

Originally Posted by Shazz

Seems like you removed the <div align="center"> or <center>

Hi Shazz,

Thank you very much. I've done it.

[AnT0NiuS]

I have couple questions.

1. I have Opera 9.21 and I have a problem with animated images. It doesn't reflect in Opera 9.21 browser. IE and Firefox works fine , but Opera not.

2. Is it possible to make this feature optinal for users. Can user choose by himself the avatar reflection?

Thank you very much.

[Shazz]

Originally Posted by Dotara

Hi Shazz,

Thank you very much. I've done it.

Great!