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!!

[Tralala]

Avatar/Image Reflection Effect (aka "AIRE")

Version History

1.5 - (Upgraders, simply overwrite reflection.js in your forum's clientscript folder!)
-Added ability to vary height and the opacity of the reflections
-Fixed issue with Safari and landscape images
-Made reflection of images with specified dimensions better
-Removed wholeimage class
-Added scriptable reflections - Reflection.add(), Reflection.remove() - allowing for interactivity and flexibility. Reflections can respond to user actions (e.g. changing the reflection opacity when the image is hovered over or clicked.) For more information, see info and files at http://cow.neondragon.net/stuff/reflection/
-Added instructions for postbit template.

1.02
-added another optional edit, this time a BB Code available for your members to invoke on an image-per-image basis

1.01
-added one optional edit, for profile picture in member profile
-tweaked the display for avatars in member profile and Members List (removing 1px border to line up reflection better)

1.0
-initial release

[Code Monkey]

Cool beans. Thanks for the submission.

[Eric]

Installed it..
Though the modifications in template were not identical in my style, so I had to copy out the part needed to add the reflect and add it in the part similar of my style, and it works nice
So for others, if I could, you can

[Black Cobra]

looks good, soon as I get 5 posts I will install..

[testebr]

Hmmm very nice effect

[twitch]

nice work, very cool

[G_Man]

Wicked...

Thanks for this. I've just too much 'junk' on After Seppuku to add this, but knew I was gonna use it on my new forum!!

[Senhor Meursault]

Sorry this was my first reply in this forum and i'm forget that you don't speak my language.

I have said that the mod seens to be usefull. And that i'll try to install in my board. And finally i said Thanks for Share this with us.

(now is it ok eric?)

[Eric]

mind to try and translate to english please ? For what I can make of it you think it is excessive ?

[Loco]

very cool thanks for sharing it.. I clicked install but haven't set it up anywhere yet

I have a question, what happens on animated avatars ?

[G_Man]

Originally Posted by Loco

very cool thanks for sharing it.. I clicked install but haven't set it up anywhere yet

I have a question, what happens on animated avatars ?

You can see it in action over on my new forum. I love it!!! Way cool.

[andybond]

Cool beans chap. Thanks for the effort of creating and sharing.

[kuringa]

Thanx For Mods

[joh]

this would look great on my site.
let me push the limits a bit. is it passable to use this code with videos? It would be kind of cool. My site deals with the polishing of natural stone. I think it would look great, it would look as if it is on a granite table.

[Eric]

indeed, that would be nice, no clue it works, why not just install it and test ... we'll all know how far the limit is

[joh]

I would if i knew how. once it say edit template, i leave that stuff to loco

[Magnumutz]

My avatar would look so cool with this installed

[Code Monkey]

What avatar?

[Ghostrider12]

It looks alright. Hopefully it will be. When I get enough posts I will install for sure.

[Asko]

Hi.
Can please somebody help me implement "reflect" to my vBulletin forum. I hope it works with avatars too.
I'm just a gig...beginer. Somebody, please?

File is in the right directory, but what template should I edit, I didn't get it. How, I know, but what and where? It's not clear to me. thx

[Black Cobra]

I have added it in, looks good..