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

[Lord Kirken Mor]

ok cool whats the difference between the edits for postbit & postbit_legacy?

[Shazz]

Originally Posted by Lord Kirken Mor

ok cool whats the difference between the edits for postbit & postbit_legacy?

postbit=horizontal
Postbit_legacy = Verticle
depends which one you use

[Lord Kirken Mor]

Thanks, it's working now.

[Panagioths]

Originally Posted by Panagioths

I have a custom theme called "Aria" and I can't find the <!-- content table --> that you mention at the installation. Any ideas how I can insert it in the template's header?

anyone?

[Tralala]

Just put that line at the very top of your template header, it should work there too. Let us know if not.

[Lord Kirken Mor]

how would I make this work for the Admincp?

[Tralala]

Originally Posted by Lord Kirken Mor

how would I make this work for the Admincp?

What image in particular are you hoping to enhance in the AdminCP? And why? (Just curious)

[Shazz]

Originally Posted by Tralala

What image in particular are you hoping to enhance in the AdminCP? And why? (Just curious)

LOL
Yes Im very curious too..
Theres only one image in the admincp and modcp I know of...

[Lord Kirken Mor]

well, the ACP logo of coarse, because i like the effect so much, I want to use it in other places too.

[Tralala]

Glad you like it. For static images like the ACP logo, you are better off rendering the effect in a graphic editor. (Or just use the reflection.js files and making it work in an "offline" web page, then take a screenshot.) Basically, save it as a GIF or JPEG with the reflection instead. That way you don't need to mess with changing the ACP or invoking javascript on that page.

The point of this mod is that is reflects "on the fly" avatars and images, which are constantly changing on your forum. There'd be no way to do it otherwise.