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

[GrendelKhan{TSU]

way cool! works great too!



<< clicks install

[Tralala]

Originally Posted by Barakat

installed and working fine >

Originally Posted by board.trash

thank you, a very nice mod!

Originally Posted by GrendelKhan{TSU

way cool! works great too!



<< clicks install

You're welcome and thanks for the compliments! :banana:

[Tralala]

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



To create a BB Code that your members may choose to invoke when they want to add the reflection effect to their linked, inline images... go to AdminCP -> Custom BB Codes -> BB Code Manager.
Click "Add new BB Code." Enter in the following and then "Save."

Title: Image with reflection

Tag: imgreflect

Replacement: <img src="{param}" class="reflect" />

Example: [imgreflect]http://www.google.com/images/logo_sm.gif[/imgreflect]

Description: Adds reflection effect to images.

Use {option}: No


Note that the "Example" will not display with a reflection there, because the javascript isn't linked in the AdminCP pages. However, the example will display properly on your forum's FAQ/BB Code page: http://www.yourforumname.com/forums/misc.php?do=bbcode

[babynino]

Thanks for this cool hack. Installed

[Nachtfalke]

Nice one. Fits my design perfectly and works like a charm

[C_P]

I added this but does not seem to work? Wonder where I may have went wrong.

[Tralala]

Originally Posted by C_P

I added this but does not seem to work? Wonder where I may have went wrong.

Due to postbit's horizontal orientation, adding this effect to avatars on forums using that layout will make it look very strange, and wasteful of space. Therefore I didn't include those instructions with the hack. It makes much more sense on the postbit_legacy (vertical) layout.

I checked your site and it looks like you are using postbit and not postbit_legacy.

So, which of the edits did you apply?

The easiest one to test with, I think, would be the BBcode. You can just add that in and make a test post with an embedded image (wrapped inside the new [IMGREFLECT] tag) and see if the reflection effect works for you.

If so, then you can start editing the templates/codes.

[Boofo]

Originally Posted by Tralala

Due to postbit's horizontal orientation, adding this effect to avatars on forums using that layout will make it look very strange, and wasteful of space. Therefore I didn't include those instructions with the hack. It makes much more sense on the postbit_legacy (vertical) layout.

That's why I only installed it for the profile.

[C_P]

I did get this to work fine. I was adding it to the wrong section and did not follow all the instructions.
I also wanted to say this is a VERY nice hack and really add a nice look to your site.
I just found out this is the first hack for Tralala and for it to work flawlessly as it is, not a bad one I must say!

[Tralala]

Originally Posted by C_P

I did get this to work fine. I was adding it to the wrong section and did not follow all the instructions.
I also wanted to say this is a VERY nice hack and really add a nice look to your site.
I just found out this is the first hack for and for it to work flawlessly as it is, not a bad one I must say!

Thanks C_P!

And yes, it is definitely looking very nice on your site...

With your permission, here are screenshots so everyone can see the reflection effect in action: