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

[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

[Boofo]

On the older browsers when it degrades, even though you can't see the reflection, does the avatar reduce to the original size or is it still elongated and looking like it has a space underneath is where the reflection should be?

[Tralala]

Originally Posted by Boofo

On the older browsers when it degrades, even though you can't see the reflection, does the avatar reduce to the original size or is it still elongated and looking like it has a space underneath is where the reflection should be?

On older browsers, there is no reflection under images, and no extra "space underneath." (In other words, images display exactly as they did before this modification was installed.)


Also note that this mod doesn't "elongate" the original image nor change it's dimensions or modify it in any way; it merely adds a reflection effect underneath. In fact, the original image is still right-clickable to download (or display in a new window or tab) in its original form.

[Boofo]

Originally Posted by Tralala

On older browsers, there is no reflection under images, and no extra "space underneath." (In other words, images display exactly as they did before this modification was installed.)


Also note that this mod doesn't "elongate" the original image nor change it's dimensions or modify it in any way; it merely adds a reflection effect underneath. The original image is still right-clickable to download in it's original form.

I meant the space where the reflection is, sorry about that.

[Tralala]

Originally Posted by Boofo

I meant the space where the reflection is, sorry about that.

Gotcha. So yeah, on older browsers... there is no reflection. And no "space" where the reflection would have been. It just displays the original image normally, as it always had been displayed (before this mod.)

[Boofo]

Originally Posted by Tralala

Gotcha. So yeah, on older browsers... there is no reflection. And no "space" where the reflection would have been. It just displays the original image normally, as it always had been displayed (before this mod.)

Thank you, sir. I will give this a shot then.

[Ziki]

Installed Maestro!

[OrangeFlea]

What does this hack do to animated avatars?

[wizardan]

Installed.
Unfortunately, my old favorite, Netscape 7.2, doesn't seem to pick it up.