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!



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

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

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.

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.)

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

Installed Maestro!

What does this hack do to animated avatars?

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

Pretty nice. Works fine on Firefox!

Reflections of animated images only work correctly in Internet Explorer.

Update 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

Will give this a shot :)

Tried this on my dev site using steps 1 -3 and it didn't work. I am using the current version of IE.

Bob

Hmm... it should...
Do you have javascript turned on in IE?
Does the effect display in other browsers for you, like Firefox?

Javascript is on, and it does not show in FF either. I will try it on my live site later and let you know.

Bob

Awesome looking! clicked install.

Actually, allow me to clarify: animated images will reflect in all the major browsers. Only in Internet Explorer 5.5+, however, does the reflection animate as well. (In the others, it is just a static reflection.)

And as mentioned previously, if the visitor's browser happens to not be compatible... avatars and images display normally, just as before. The visitor wouldn't even know this effect was installed.

Your zip is corrupt

I've just re-uploaded it, and removed the screenshot samples (since they're on display in the first post.) Let me know if that works for ya.

Nope still doesn't

Weird; others have downloaded it fine...

Anyway, I just zipped it on a different computer using a different app. Please try downloading again, thanks!

installed and working fine >

Thanks, Lil Ripsta. Please click Install. :cool:

Sounds good. I've tested it and confirmed it works over here, as have quite a few others... so am curious to hear feedback after you've tested on your live site.

Working awesome. Great job. Thank you!

I just made a slight tweak to the installation procedure, and that is putting the reflection.js file into the clientscript directory instead. (It's more appropriate there, than loose in the forum's parent directory.) I then updated the "header" template change to match this new location.

Other than that, the modification is exactly the same. Such a minor change, not worthy of a new version number.

LOL I did that when I first installed it. Better to keep the js files together. ;)

thank you, a very nice mod!

way cool! works great too!

:D

<< clicks install

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

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

Thanks for this cool hack. Installed :)

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

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.

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

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!

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:

http://homepage.mac.com/joshr/trl/re...es/screen1.jpg

http://homepage.mac.com/joshr/trl/re...es/screen2.jpg